css - 动画keyframes

动画的定义与使用：

  <style>
      /*1.定义动画*/
    @keyframes move {
        /*动画开始*/
        from{

        }
        /*动画结束*/
        to{

        }
    }

    /*2.元素启用动画*/
    div {
        animation: move/*动画名词*/ 5s/*动画时长*/ infinite/*循环播放动画*/;
    }
  </style>

或者（按百分比 随自己定义）

  <style>
    /*1.定义动画*/
    @keyframes move {
        /*动画开始*/
        0% {}
        25% {}
        50% {}
        /*动画结束*/
        100% {}
    }
    
    /*2.元素启用动画*/
    div {
        animation: move/*动画名词*/ 5s/*动画时长*/ infinite/*循环播放动画*/;
    }
  </style>

 

animation: move 5s steps(8,start)/*动画分为几步*/ infinite;

• step-start 等同于 steps(1,start) ，动画分成 1 步，动画执行时以左侧端点为开始
• step-end 等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始

 

启用动画的其他属性：

设置动画的持续时间(必须设置的属性)
animation-duration：5s;

设置多久后开始动画
负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。
在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样
animation-delay：5s;

设置动画运行多少次
animation-iteration-count：2; 运行两次
animation-iteration-count：infinite; 运行无数次

反向或交替运行动画
animation-direction 属性可接受以下值：
normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

指定动画的运动曲线
animation-timing-function 属性可接受以下值：
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

 

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。