The background-blend-mode is a CSS property which defines the blending of the background images with each other and with the background-color. It has 10 values: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. The default value is normal. If there are several background layers and they have a specified list of blend modes, background-blend-mode should be applied in the same…

The background-attachment property defines if the background-image is fixed or it will scroll along with the rest of the page. Background-attachment has three values: fixed, scroll and local. When the “scroll” value is set, the background-image will scroll with the page. This is the default value. When the “fixed” value is applied, the background-image will remain fixed to the viewport. Even if an element…

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