My Blog

The animation-name property specifies one or more names of animations defined by the @keyframes rule which should be applied to the selected element. When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently. The animation-name property is one of the CSS3 properties. The animation shorthand property can be used to set…

The CSS animation-iteration-count defines how many times the animation should be played. It is specified by two values: number and infinite. The default value is 1, but any number can be set. 0 or negative values are invalid. If the infinite value sets the animation, it will be played forever. If multiple values are used every time the animation is…

The animation-fill-mode property sets a style to the element when the animation is not executing (before it starts, after it ends, or both). The animation-fill-mode is one of the CSS3 properties. The animation-fill-mode property is the only property that affects the element before the first @keyframe is played or after the last keyframe is played. It can assume the following values: “forwards”…

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,…