技术交流QQ群:1027579432，欢迎你的加入！

  • 动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

  • 相比于过渡而言，动画可以实现更多的变化，更多的控制，连续自动播放等效果。


    动画效果.png

1.动画的基本使用

  • 制作动画分为两个步骤：
    • a.先定义动画；
    • b.再使用(调用)动画；
1.1 先用keyframes定义动画(类似于定义类选择器)
  • 定义动画语法： 
    @keyframes 动画名称 {
    0% {
        width: 100px;
    }
    
    100% {
        width: 200px;
    }
}
  • 动画序列：
    • 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。
    • 在@keyframes中规定某些CSS样式，这样就能创建由当前样式逐渐改为新样式的动画效果；
    • 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式，任意多的次数。
    • 请用百分比来规定变化发生的时间，或者使用关键字from和to，等价于0%和100%。
1.2 元素使用动画
  • 使用动画语法： 
    <!--调用动画-->
animation-name: 动画名称;
<!--持续时间-->
animation-duration: 持续时间;

2.动画序列实现多个状态变化

多个状态的变化.png
  • 代码： 
    /* 1.动画序列可以做多个状态的变化  keyframe 关键帧 */
/* 2.里面的百分比一定要是整数*/
/* 3.里面的百分比就是 总的时间（本案例中是10s）的划分 25% * 10s = 2.5s*/
@keyframes move {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1000px, 0);
    }

    50% {
        transform: translate(1000px, 500px);
    }

    75% {
        transform: translate(0, 500px);
    }

    100% {
        transform: translate(0, 0);
    }
}

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    animation-name: move;
    animation-duration: 10s;
}

3.动画中常用的属性

动画中常用属性.png

4.动画中常用属性的简写方式[重点]

  • 简写方向的语法： 
    animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
<!--例如-->
animation: myfirst 5s linear 2s infinite alternate;
  • 注意：
    • 动画属性的简写方式中，不包含animation-play-state；
    • 暂停动画：animation-play-state: paused;经常和鼠标经过等其他配合使用；
    • 想要动画走回来，而不是直接跳回来，可以使用animation-direction: alternate;
    • 盒子动画结束后，停止的结束位置用animation-fill-mode: forwards;

5.运动曲线animation-timing-function中的细节

  • animation-timing-function: 规定了动画的运动曲线，默认是eas。


    速度曲线属性值.png

6.资料下载