Detailed introduction to CSS3 animation animation related properties and keyframe rules keyframes

When I wrote the three-dimensional cube yesterday, I used the syntax of animation

Come to the system todayReview
Transition has Its limitation
is simple, but it can only change between two states
and it requires the driver of the event to be able to
Cannot move by itself
So in order to solve this problem
We need animation animation

Animation

If you want to achieve animation effects
Only animationAttributes is not enough
We also need@keyframes rules
Let’s look at an example first

p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

When the mouse is hovered, the element first turns red and then transitions There is a transition from purple to green

Let’s take a look at @keyframes rules first

keyframes

In @keyframes, we define animation keyframes
Then the animation will perform transition execution according to the frame state we specify in the keyframes keyframes
0% - 100% represents the time transition of the animation
0% and 100% in the rules,
can be replaced by from and to keywords

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

---

If we omit the starting frame, the browser will transition according to its original style

@keyframes change {
    100% {        background-color: lime;    }}

---

In addition, we can also write the same frames together like this

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

animation

animation is a composite attribute with the following sub-attributes

• animation-name
  Specify the name of the keyframes animation

• animation-duration
  Specify the animation execution time

• animation-timing-function
  Specify the speed curve of the animation, the default is "ease" easing

• animation-delay
  Specify animation delay time, default "0" no delay

• animation-iteration-count
  Specify the number of times the animation is played, the default is "1" to execute once

• animation-direction
  Specifies the animation Execution direction, the default is "normal"

This composite attribute is more complicated than our transition
The first four attributes will not be explained much, they are similar to our transition
For those who have forgotten, click here -> Portal

animation-iteration-count In addition to filling in the number
, we can also use a commonly used keyword infiniteloop

animation-direction has the following attribute values ​​in addition to normal

• reverse
  Reverse animation

• alternate
  Play animation in turn

• ##alternate-reverse Play animation in reverse turn
  

Explained through an example

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

Default

normal:
Two test animations:
100px -> 200px
100px -> 200px

.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

---

reverse：
Two test animations:
200px -> ; 100px
200px -> 100px

.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

---

alternate：
Two test animations:
100px -> 200px
200px -> 100px

.demo:hover {    animation: change 1s 2 linear alternate-reverse; /*改*/}

---

alternate-reverse：
Two test animations:
200px -> 100px
100px -> 200px

animation-fill-mode

The two properties I am going to talk about below are not sub-properties of animation

So they cannot be written in animation

animation-fill-mode specifies

the state of the object outside the animation time, the default is "none" In addition to none, there are the following attribute values ​​

• forwards After the animation is completed, keep the last property (defined in the last frame)
  

• backwards  
  在animation-delay指定时间内、动画显示之前，应用起始属性（定义在第一帧）

• both  
  应用forwards和backwards两种模式

---

forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}

我们发现1s之后，元素并没有回到最初的100px，而是保持了我们最后一帧的200px状态

---

backwards  
理解这个属性，我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后，1s后瞬间变为150px，然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px，然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用，延迟前就应用第一帧动画的样式，然后准备过渡

animation-play-state

animation-play-state    指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

---

今天的动画就先写这么多，感觉写了很长时间
日后再总结动画相关的性能问题

The above is the detailed content of Detailed introduction to CSS3 animation animation related properties and keyframe rules keyframes. For more information, please follow other related articles on the PHP Chinese website!