The CSS background is a shorthand used to set all background style properties. Background property includes the following properties: If one of the properties in the background shorthand property is background-size, a slash should be used for separating it from background-position. When several background-image sources are used but background-color is also needed, it should be last in…

The backface-visibility is a CSS property which defines whether the back face of an element should be visible or not. The back face of an element is a mirror image of the front. If the element is rotated, you can choose to show the back face of an element to the user or not. Two values specify…

The appearance property displays an element using a platform-native styling based on the users’ operating system’s theme. The -moz-appearance property is used in Gecko (Firefox) to show an element using platform-native styling based on the operating system’s theme. The -webkit-appearance property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix indicating that it…

The animation-timing-function property defines how the animation will progress over the duration of each cycle, not throughout the whole of the animation. It specifies the animation’s speed curve defining the time which is needed for an animation to change from one style set to another. Timing functions can be specified on certain keyframes in the @keyframes rule. If there…

CSS animation-play-state property specifies if the animation is running or it is paused. If you resume a paused animation it will start from where it was left off at the time it was paused, rather than starting from the beginning of the animation sequence. Also, you can run the animation from paused state. When multiple comma-separated values…

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…