The animation-duration property defines the length of time (in seconds or milliseconds) that an animation takes to complete its one cycle. Very often the animation shorthand property is used to set all animation properties at once. Default value for the animation-duration property is 0, which means that the animation starts immediately and the keyframes don’t have an effect. Negative values are…

The CSS animation-direction property sets how animation should be played: forwards, backwards or in alternate cycles. The default value is normal. Each time you run the animation, it will reset to the beginning state and start over. When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined…

The CSS animation-delay property specifies the start of an animation. The animation can start later, immediately after the start, or immediately and halfway through the animation. The animation-delay property is one of the CSS3 properties. Default value is 0. Negative values are allowed. When negative values are used, the animation will start as if it had already been playing for…

CSS align-self property aligns the selected items inside the current flex line and override the align-items values. The align-self property is one of the CSS3 properties. The align-self property accepts the same values as the align-items property: Initial Value auto Applies to Flex items, grid items, and absolutely-positioned boxes. Inherited No. Animatable No. Version CSS3 DOM Syntax object.style.alignSelf = “auto”; Syntax Example of the align-self property: Result Here…

The animation property is used to animate (gradually change from one style to another) CSS properties with discrete values: layout properties (border, height, width, etc.), properties defining position (left, top), font sizes, colors and opacities. The animation property is one of the CSS3 properties. For understanding the animation properties a -webkit- prefix can be needed for older browsers. The @keyframes at-rule To use animation you…

The all property resets all the properties of the selected element apart from unicode-bidi and direction that control the text direction. This property is considered a shorthand property since we can control the values of CSS properties at once. But there isn’t a longhand version of the all property and it does not have sub-properties. Initial Value none…

The CSS align-items property specifies the default alignment for flex items. It is similar to the justify-content property but the vertical version. This property is one of the CSS3 properties. The align-items property accepts the following values: Initial Value stretch Applies to All elements. Inherited No. Animatable No. Version CSS3 DOM Syntax object.style.alignItems = “center”; Syntax Example of the align-items property: Result In the following example,…

The CSS align-content property aligns a flex container’s lines when there is available space vertically (on the cross-axis). The align-content property is one of the CSS3 properties. When there is only one line in the flexbox, this property will not affect. It needs multiple lines within a flexible container. The value “stretch” is this property’s default value. The align-content property accepts the following values:…