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

黄舟
Release: 2017-05-21 16:06:22
Original
3418 people have browsed it

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>
Copy after login
.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;    }}
Copy after login

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 {
        ......
    }
}
Copy after login

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

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


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

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

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;    }}
Copy after login

Default

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

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

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

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

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

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

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; /*改*/}
Copy after login


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


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

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

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

现在增加backwards

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

这回我们发现鼠标悬浮的一瞬间就变为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";
Copy after login

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!