What does css animation consist of?

CSS animation is composed of three parts: keyframes, animation properties and CSS properties. Keyframes are used to define the status of animations at different stages; animation properties are used to determine the playback duration, number of plays, and what function to use to play animations; css attributes are used to specify the status of css elements under different keyframes. .

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS animation is composed of three parts, namely keyframes (keyframes), animation properties (properties), and css properties.

• Keyframes (keyframes) - Define the state of animation at different stages.

• Animation properties (properties) - Determine the playback duration of the animation, the number of playback times, and what function to use to play the animation, etc. (Can be compared to an audio and video player)

• css attribute - specifies the status of the css element under different key frames.

1. Key frames

are specified using @keyframes rules, which can be used to define a cycle of CSS animations Behaviors allow you to create simple animations.

Animations are similar to transitions in that they are representations of changing CSS properties over time. The main difference is that the transition is triggered implicitly when the property value changes (for example, when the property value changes on hover), but the animation is performed explicitly when an animated property is applied. Therefore, animations need to show explicit values ​​for animated properties. These values ​​are defined by the animation keyframes specified in the @keyframes rule. Therefore, the @keyframes rule consists of a set of encapsulated CSS style rules that describe how attribute values ​​change over time.

2. Animation attributes

#If you create an animation through @keyframes, you need the animation attribute to apply the animation to the element and set it The number of animation iterations, whether to alternate between start and end values, and whether the animation should run or pause.

Animation attributes can be understood as the related functions of the player. A most basic player should have: play/pause, play duration, play order (reverse/forward/alternative play), number of loops, etc.

animation:
[animation-name] [animation-duration] // Name and duration of animation
[animation-timing-function][animation-delay] // About Function of time (properties/t), delay time
[animation-iteration-count] [animation-direction] // Number of playbacks, playback order
[animation-fill-mode] [animation-play-state] ; // Set the corresponding style before playing or after stopping, and control the animation to run or pause

The syntax of keyframe animation attributes:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

In What's inside the curly braces of the @keyframes rule?

Inside the curly braces, we need to define keyframes or waypoints that specify the value of the property being animated at a specific point during the animation. This allows us to control intermediate steps in the animation sequence. For example, a simple animated @keyframe can look like this:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    background-color: red;
    }
}
.demo{
 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Running effect:

##'0%', '50%', '100% ' are all keyframe selectors, each selector defines a keyframe rule. The keyframe declaration block of a keyframe rule consists of attributes and values.

The animation above resembles a simple transition effect: the background color changes starting from one value (0%) at the beginning of the animation, reaching a value (50%) in the middle, and reaching another value (100) at the end of the animation %). The "0%", "50%", and "100%" keyframe selectors define the waypoints or percentage points at which you want the animated property to change value. We can also use the selector keywords from, to instead of using 0% and 100% respectively, they are equivalent.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

The keyframe selector consists of one or more comma-separated percentage values ​​or the from and to keywords. Note that the percent unit specifier must be used for percent values. Therefore, '0' is an invalid keyframe selector.

The following is an example of an animation with a keyframe selector that includes multiple comma-separated percentage values ​​and/or the keyword keyframe selectors from and to.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

The @keyframes rule definition above: The element's top offset will be equal to zero at the beginning, halfway through, and at the end of the animation, and it will be equal to zero at one-quarter and three-quarters of the way. 100px; This means that the element moves up and down several times during the animation loop.

(Learning video sharing:

css video tutorial)

The above is the detailed content of What does css animation consist of?. For more information, please follow other related articles on the PHP Chinese website!