Deformation and animation in css3 (3)_html/css_WEB-ITnose

Transform can realize matrix transformation, transition can realize the smooth transition of attributes, and animation means animation. This attribute is related to the real frame-by-frame animation. This article introduces the animation attribute.

The animation attribute achieves animation effects by changing element attributes in some key frames. Of course, you can also control the animation duration, the number of animation iterations, etc.

1. Example

When introducing transition, there is an example at the beginning where the width of the div slowly increases from 100px to 200px when the mouse is placed on it.

The implementation method using transition is as follows

div:hover{    width: 200px;    transition:width 5s ease-in;}

Similar effects can also be achieved using animation, as follows:

<style type="text/css">div {    width: 100px;    height: 100px;    background-color: red;}@keyframes enlarge {    0% {        width: 100px;    }    50% {        width: 150px;    }    100% {        width: 200px;    }}div:hover {    /*width: 200px;    */       /*transition:width 5s ease-in;*/    animation: 5s enlarge;}}</style><div></div>

When the mouse is hovering, the animation lasts for 5s. At half the time, the width of the div should reach 150px from 100px. At 5s, the width of the div should reach 200px, and the animation ends.

But there is still a difference between the transition and animation effects. When the mouse hovers up, the width remains 200px after the transition animation is executed; the width returns to 100px after the animation animation is executed.

Of course this is just the default effect, and the effect when the animation is completed can also be modified.

Modify the animation in the above code to

animation: 5s enlarge forwards;

to stop the animation at the last frame after execution. This forwards is the value of animation-fill-mode, which will be discussed in detail later.

Through this example, I just want to say that transition can be understood as a simplified version of animation. Animation can provide more control and is more powerful. The introduction officially begins below.

2. keyframes

keyframes means "key frames". Key frames will change the calculated value of element attributes.

keyframes syntax:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';keyframes-blocks: [ keyframe-selectors block ]* ;keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

Comprehensive writing:

 @keyframes IDENT {     from {       Properties:Properties value;     }     Percentage {       Properties:Properties value;     }     to {       Properties:Properties value;     }   }   或者全部写成百分比的形式：   @keyframes IDENT {      0% {         Properties:Properties value;      }      Percentage {         Properties:Properties value;      }      100% {         Properties:Properties value;      }    }

It can be seen that keyframes are written like this: by It starts with "@keyframes", followed by the "name of the animation" plus a pair of curly brackets "{}". In the brackets are some style rules for different time periods. The rules are written in the same way as css styles.

A style rule in a "@keyframes" is composed of multiple percentages, such as between "0%" and "100%". Multiple percentages can be created in one rule, one in each In the percentage, different attributes are added to the elements that need animation effects, so that the elements can achieve a constantly changing effect, such as moving, changing the element's color, position, size, shape, etc.

Two keywords, "from" and "to" indicate where an animation starts and ends, that is, "from" is equivalent to "0%", and "to" is equivalent to "100%" ".

Note: The % in 0% cannot be omitted. If omitted, the entire keyframes will have a syntax error and the entire rule will be invalid, because the unit of keyframes only accepts percentage values.

Example: An example from the W3C official website. This code will be used when introducing animation below.

 @-webkit-keyframes 'wobble' {     0% {        margin-left: 100px;        background: green;     }     40% {        margin-left: 150px;        background: orange;     }     60% {        margin-left: 75px;        background: blue;     }     100% {        margin-left: 100px;        background: red;     }  }

Keyframes define the animation of each frame, but just writing keyframes is useless, it needs to be called to take effect. So how to call it depends on animation.

3. animation

animationWhen no event is triggered , after the page is loaded, the element css style will be explicitly changed over time to produce an animation effect.

How does the element call animation and keyframes?

Example: Call the wobble animation written above.

 .demo1 {     width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: 10s;/*动画持续时间*/     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/     -webkit-animation-delay: 2s;/*动画延迟时间*/     -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/     -webkit-animation-direction: alternate;/*定义动画方式*/  }

At this point, if you have seen transition before, you should have understood that animation is also a composite attribute.

animation contains the following attributes: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction,animation-play-state and animation-fill-mode. The following introduces them one by one, focusing on understanding the attributes in bold.

1. animation-name

animation-name is the most critical, indicating which frame of animation to apply.

Syntax:

animation-name: none | IDENT[,none | IDENT]*;

Default value: none, that is, there is no animation effect by default.

The animation-name attribute calls the animation defined by @keyframes and must be exactly the same as the animation name defined by "@keyframes" (case-sensitive).

Example: animation cooperates with translation in matrix transformation to make an interesting little animation.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>变形与动画</title><style type="text/css">@keyframes around{  0% {    transform: translateX(0);  }  25%{    transform: translateX(180px);  }  50%{     transform: translate(180px, 180px);   }  75%{    transform:translate(0,180px);  }  100%{    transform: translateY(0);  }}div {  width: 200px;  height: 200px;  border: 1px solid red;  margin: 20px auto;}div span {  display: inline-block;  width: 20px;  height: 20px;  background: orange;  border-radius: 100%;  animation-name:around;  animation-duration: 10s;  animation-timing-function: ease;  animation-delay: 1s;  animation-iteration-count:infinite;}</style></head><body>    <div>        <span></span>    </div></body></html>

2. animation-duration

Syntax:

animation-duration: <time>[,<time>]*

The default value is 0, which means the animation duration is 0, that is, there is no animation effect (if the value is negative, it is treated as 0).

animation-duration defines the duration of animation playback, which is the time required to complete an animation from 0% to 100% . Unit s.

3. animation-timing-function

Syntax:

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

The animation-timing-function attribute is used to set the animation playback method. For details, please refer to the introduction in Transformation and Animation (2) in CSS3.

4. animation-delay

Syntax:

animation-delay:<time>[,<time>]*

animation-delay定义事件触发到动画开始执行的时间，即延时。

5、animation-iteration-count

语法：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

animation-iteration-count属性用来定义动画的播放次数。

默认值为1，即动画从开始到结束只播放一次。

值为infinite，动画将会无限次播放。

6、animation-direction

语法：

animation-direction:normal | alternate [, normal | alternate]*

animation-direction设置动画播放方向。

属性：

normal:默认值，如果值为normal时，动画每次循环都是向前播放。

alternate：奇数次播放动画是按顺序播放各帧动画，偶数次播放动画是按逆序播放各帧动画。

这个alternate还是很有用的，我写了一个例子，可以感受一下alternate效果。

例子：div尺寸由小到大，然后由大到小。

<style type="text/css"> @-webkit-keyframes 'testAnimationDirection' {     0% {        width: 50px;     }     20% {        width: 100px;     }     40% {        width: 150px;     }     60% {        width: 200px;     }     80% {        width: 250px;     }     100% {        width: 300px;     }  }    div{     width: 50px;     height: 50px;     border:1px solid red;     -webkit-animation-name:'testAnimationDirection';     -webkit-animation-duration: 10s;     -webkit-animation-timing-function: ease-in-out;      -webkit-animation-delay: 0s;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: alternate;     -webkit-animation-fill-mode:backwards;  }</style><div></div>

 

7、animation-play-state

animation-play-state用来控制元素动画的播放状态。

参数：

running:running是其默认值，作用是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放。

Note:

这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。

如果暂停了动画的播放，元素的样式将回到最原始设置状态。

paused:暂停播放。

这个很有用，让动画在鼠标悬停时暂停，离开时继续播放。

例子：还是上面的例子，加下面代码即可。

  div:hover{      animation-play-state:paused;  }

8、animation-fill-mode

animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用的样式。

有四个属性值：

none：默认值，动画执行前后不改变元素的任何样式。就是说动画在第一个关键帧播放之前不影响元素，最后一个关键帧播放完后停止影响元素。

forwards:动画完成后呆在最后一帧，就是保持结束时的状态。这里的最后一帧取决于animation-direction和animation-iteration-count：

backwards:在animation-delay期间应用第一帧。保持animation-delay，第一帧取法如下：

both:根据animation-direction轮流应用forwards和backwards规则。

Note:forwards和backwards关键字都是有s的。

backwards和none的区别

还是上面的例子，只是增加了animation-fill-mode属性。

<style type="text/css"> @-webkit-keyframes 'wobble' {     0% {        margin-left: 100px;        background: green;     }     40% {        margin-left: 150px;        background: orange;     }     60% {        margin-left: 75px;        background: blue;     }     100% {        margin-left: 100px;        background: red;     }  }    div{   width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'wobble';     -webkit-animation-duration: 10s;     -webkit-animation-timing-function: ease-in-out;      -webkit-animation-delay: 10s;     -webkit-animation-iteration-count: 10;     -webkit-animation-direction: alternate;    /* -webkit-animation-fill-mode:none; /*动画开始为蓝色*/     -webkit-animation-fill-mode:backwards; /*动画开始为绿色*/  }</style><div></div>

animation-fill-mode为none，则动画开始延时期间div为蓝色，backwards则动画开始延时期间div为绿色。

四、相关资源

看网上资料说做动画，尽量使用绝对定位，从而避免重绘重排问题：

动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html

动画十二原则：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

css3 animation动画库，有很多基础动画

http://daneden.github.io/animate.css/

hover animation动画

http://leaverou.github.io/animatable/

css3 animation在线调节工具：

http://melonh.com/animationGenerator/     基于chrome的插件，可以快速调节页面上的动画

http://isux.tencent.com/css3/tools.html      腾讯isux一款非常强大的动画工具

http://tid.tenpay.com/labs/css3_keyframes_calculator.html    财付通的帧动画调节工具

参考资源链接：

css3 animation动画技巧

跳动心脏

w3c css3-animations

MDN animation-fill-mode

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。