How to manage animation on HTML using CSS

author details
AdiPie
14th Jun 2021
1 min read
Image
scroll behaviour propoerty

Scroll-behavior property

The scroll-behavior CSS property sets the behavior for scrolling over the box when scrolling over is set off by the navigation.

Note that some other scrolls, for example, those performed by the client, are not affected by this property. At the point when this property is determined on the root component, it applies to the viewport all things considered. This property determined on the body component won't spread to the viewport.

Qualities

auto: The box scrolls immediately.

html {
  scroll-behavior: auto;
}

smooth: The box is smoothly animated in between the elements which are applicable within the scrolling box.

html {
  scroll-behavior: smooth;
}

 

Syntax

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;