1.@keyframes 规则

@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

div
{
    animation: myfirst 5s;/*前为动画名称，后为动画时长*/
 }

2.属性animation-name

为1.中速写属性的前半部分

3.属性animation-duration

规定动画完成的时间
默认值为零，若不修改默认值则动画效果不发生。
取值为数字后加s,表示完成动画需要多少秒
通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），可以设置样式何时改变
以下动画完成 25％，完成 50％以及动画完成 100％时更改

元素的背景颜色：

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

同样，位置也可以改变：

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

4.属性animation-delay

规定动画开始的延迟时间
取值为数字加s,表示在动画开始前有几秒的延迟。
若取值为负，则表示动画将开始播放，如同已播放 N 秒，即从第n秒开始播放

5.属性animation-iteration-count

指定动画应运行的次数
取值为数字，表示n次；
取值infinite使动画永远持续下去

6.属性animation-direction

指定是向前播放、向后播放还是交替播放动画

normal - 动画正常播放（向前）默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后（交替）
alternate-reverse - 动画先向后播放，然后向前（交替）

7.属性animation-timing-function

规定动画的速度曲线

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行在三次贝塞尔函数中定义自己的值

8.属性animation-fill-mode

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性

div {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

简写属性：

div {
  animation: example 5s linear 2s infinite alternate;
}

应用举例：自动播放的轮播图

<div class="border">
        <div class="imges clearfix">
            <img src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" alt="">
            <img src="https://img2.baidu.com/it/u=1987088077,1788287366&fm=26&fmt=auto" alt="">
            <img src="https://img1.baidu.com/it/u=3427821080,1838386749&fm=26&fmt=auto" alt="">
            <img src="https://img0.baidu.com/it/u=3340111814,1006675052&fm=26&fmt=auto" alt="">
        </div>
    </div>

@keyframes myfirst{
    25% {
        transform: translateX(-400px);
    }
    50% {
        transform: translateX(-800px);

    }
    75% {
        transform: translateX(-1200px);

    }
 
 }
div.border{
    width: 400px;
    height: 300px;
    border: 2px solid #000;
    margin: auto;
    overflow: hidden;
}
div.border>div.imges>img{
    width: 400px;
    height: 300px;
    float: left;
}
div.border>div.imges{
    width: 1600px;
    animation-name: myfirst;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

注意：如果动画中使用left、right、top、bottom，那么一定要设置定位！！！

CSS3 动画

文章目录