动画Animation 常用属性

动画Animation 常用属性

动画就是由一个个的关键帧组成的。

想实现一个动画的效果，这个时候

1.需要先预设一个动画

@keyframes cc {
/* 动画序列：时间节点 */
/* 开始状态 */
/* 节点设置 */
/* 写CSS属性 */
from {
transform: translateX(0px);
}
/* 结束状态 */
to {
transform: translateX(500px);
}
/* ************************************百分数 */
0% {
/* 节点设置 */
/* 写CSS属性 */
transform: translateX(0px);
}
50% {
transform: translateX(800px);
}
100% {
/* 注意点：节点状态一定是在上一个节点状态上进行 */
transform: translateX(800px) translateY(600px);
}
}

百分比指的是动画耗时（animation-duration）的时间比

2.设置动画属性

先来一个综合

animation: name duration timing-function delay iteration-count direction fill-mode;

　其中两个必要的属性就是

1.animation-name：cc;           你用@keyframe设置的动画的名字(必要）

2.anmation-duration：3s；      动画耗时（必要）

3.animation timing-function ：运动速度

         默认属性ease（低速开始，加快，低速结束） linear（匀速运动） ease-in（低速开始）

          ease-out（低速 结束 ）ease-in-out 低速开始和结束    steps（n）动画分成n步来完成   

　　cubic-bezier()函数，https://cubic-bezier.com/网站自动生成运动曲线

          效果图      http://www.w3school.com.cn/tiy/c.asp?f=css_animation-timing-function 

4.animation-delay ：2s； 延迟时间   

5.animation-interation-count：2/infinite（无限次）  动画响应的次数（interation英文意思相互影响）

6.animation-direction:     循环方向   

            默认normal(默认0~100) / alternate(0~100~0)/ reverse(100~0)/

            alternate-reverse(100~0~100)

7.animation-fill-mode      动画等待或者结束时候的状态     

        forwards 初始状态不能立即执行0%的状态，执行动画完成后保留最后状态

        backwards 如在0%时候设置样式，立即执行。动画完成后不会保留最后的结果（有延迟）

        both  既能立即执行设置的样式，也会保留最后的结果。

8.animation-play-state   （不在简写内） 播放和暂停状态    paused暂停     running 播放

3.组动画  ，让几个动画同时执行