【CSS】动画animation所含各项参数内容

本文介绍: 主要描述CSS3中，对于animation 动画效果设置语句中，各个参数的详细说明，以及范例代码。

一、格式

animation: [name] [duration] [ti min g–function] [delay] [i t e ratio n–count] [direction] [fill–mode]

二、参数 介绍

2.1 name

即ani mat ion-na m e，用于给@keyframes 指定动画名称。

ani mat ion-na m e
参数可省略	是
单位	字符串
备注	不设置则不使用动画

2.2 duration

即ani mat i on–duration，用于标记一个动画完成周期所需时间。非必填。

ani mat i on–duration
参数可省略	是
单位	秒(s)，毫秒(ms)
备注	默认0s，不设置则不使用动画

2.3 ti min g–function

即ani mati on–ti ming-function，用于描述一个动画数值变化方式。非必填。

animati on–ti ming-function
参数可省略	是
单位	字符串
备注	默认参数为ease

参数表如下：

linear:表示值变化均匀，匀速播放动画。
ease:默认参数。表示值变化以低速率开始，逐渐加快，直到结束前速率降低。
ease–in:表示值变化以低速率开始，平均速率过渡，结尾戛然而止。
ease-out:表示值变化以平均速率开始，以低速率缓慢结尾。
ease-in–out:表示值变化以低速率开始和结尾。
steps(int,start|end):表示将值区间按一定数量隔开，每段时间间隔中值保持不变。第一个参数为整型，第二个参数为字符串。
- int:间隔数量，数量越小效果越明显。
- start|end:字符串参数，start为从值区间头部开始计算，end为从值区间尾部开始计算。
- 举例：值区间[0,99]，参数steps(4,start|end)，start或end。
  - 将0~99分为四段，分别为0~24,25~49,50~74,75~99。
  - 首先值以匀速从0开始向99变化。当为start时，值一旦在0~24开始变化，开始于此段的头部值0，则立刻输出该段结尾值24，等待时间推动值变化进入下一段。
  - 当为end时，值一旦在0~24开始变化，由于未触发此段的尾部值24，故一直保持输出该段的头部值0，等待时间推动值变化进入下一段。
cubic–bezier(p1x,p1y,p2x,p2y):表示值变化v–t图遵循贝塞尔曲线图形。
- 在二维直角坐标系中，首先有P0(p0x,p0y)，此时p0x=0，p0y=0，即原点，此点固定不变。其次有P3(p3x,p3y)，此时p3x=1,p3y=1，此点固定不变。
- 最后有两自由点P1(p1x,p1y)、P2(p2x,p2y)，由P0P1组成一条贝塞尔辅助线，由P2P3组成另一条贝塞尔辅助线，在这两条辅助线的作用下生成一条贝塞尔曲线，此曲线即值变化速度曲线 v–t图，其中负值代表方向。
- 贝塞尔曲线绘制与效果可自行百度，或等待文章更新。

2.4 delay

即animati on–delay，用于标记一个动画完成周期所需时间。非必填。

animati on–delay
参数可省略	是
单位	秒(s)，毫秒(ms)
备注	默认0s，不设置则不使用延时效果

当值为正数时，表示动画延时启动。当值为负数时，表示动画超前启动（直接从超前秒钟的动画处开始）。

2.5 iteration-count

即animation-iteration-count，用于描述一个动画循环次数。非必填。

animat ion-iteration-count
参数可省略	是
单位	整型或字符串
备注	默认0s，不设置则不使用循环播放效果

参数表如下：

整型：表示播放次数。
inf inite:字符串，表示无限循环播放。

2.6 direct ion

即animat ion-direct ion，用于设置是否循环往复播放动画。非必填。

animat ion-direct ion
参数可省略	是
单位	字符串
备注	默认参数为normal

参数表如下：

normal:默认参数。动画正常播放，不进行循环往复操作。
re verse:动画反向播放。
alte r nate:动画在奇数次正向播放，在偶数次反向播放。
alte r nate-reverse:动画在偶数次正向播放，在奇数次反向播放。
initial:动画重新设置为默认值。
inhe rit:动画设置为父元素属性。

2.7 fill–mode

即animation-fill–mode，用于在动画不播放时（处于延时或完成的状态）设置动画的位置。非必填。样式可以分为在animation外部的初始样式，以及在keyframes中定义的动画样式。

animation-direct ion
参数可省略	是
单位	字符串
备注	默认参数为none

参数表如下：

none:默认参数。在动画不播放时不对动画产生任何作用。
forwards:在动画结束时应用动画样式效果，在动画延时中应用初始样式效果。
back war ds:在动画结束时应用初始样式效果，在动画延时中应用动画样式效果。
bot h:在动画结束时应用动画样式效果，在动画延时中应用动画样式效果。
initial:动画重新设置为默认值。
inhe rit:动画设置为父元素属性。

三、源码

<!DOCTYPE html>
<html>

<head>
    <title>animation</title>
</head>

<body>
    <!--<div class="dest-line"></div>-->
    <div class="eg-name">name</div>
    <div class="eg-duration-3s">drt3s</div>
    <div class="eg-duration-5s">drt5s</div>
    <div class="eg-timing-function-linear">linear</div>
    <div class="eg-timing-function-ease">ease</div>
    <div class="eg-timing-function-ease-in">ease-in</div>
    <div class="eg-timing-function-ease-out">ease-out</div>
    <div class="eg-timing-function-ease-in-out">ease-in-out</div>
    <div class="eg-timing-function-steps-step-3">step3</div>
    <div class="eg-timing-function-steps-step-30">step30</div>
    <div class="eg-timing-function-steps-start">start</div>
    <div class="eg-timing-function-steps-end">end</div>
    <div class="eg-timing-function-cubic-bezier1">bezier1</div>
    <div class="eg-timing-function-cubic-bezier2">bezier2</div>
    <div class="eg-delay-0s">delay0s</div>
    <div class="eg-delay-2s">delay2s</div>
    <div class="eg-delay--2s">delay-2s</div>
    <div class="eg-interation-count-2">ic-2</div>
    <div class="eg-interation-count-max">ic-max</div>
    <div class="eg-direction-normal">dir-nrml</div>
    <div class="eg-direction-reverse">dir-rvrs</div>
    <div class="eg-direction-alternate">dir-altr</div>
    <div class="eg-direction-alternate-reverse">dir-altr-re</div>
    <div class="eg-direction-initial">dir-intl</div>
    <div class="eg-direction-inherit">dir-inhrt</div>
    <div class="eg-fill-mode-none">flmd-none</div>
    <div class="eg-fill-mode-forwards">flmd-frwd</div>
    <div class="eg-fill-mode-backwards">flmd-bkwd</div>
    <div class="eg-fill-mode-both">flmd-both</div>
    <div class="eg-fill-mode-initial">flmd-intl</div>
    <div class="eg-fill-mode-inherit">flmd-inhrt</div>



</body>

</html>

<style>
    div {
        position: relative;
        width: 50px;
        height: 50px;
        opacity: 1;
        margin: 0px;
        padding: 0px;
        border-width: 2px;
        border-radius: 50px;
        border-color: aqua;
        border-style: solid;
        text-align: center;
        color: chartreuse;
        line-height: 20px;
        background-color: brown;
    }

    .dest-line {
        top: 0px;
        left: 290;
        width: 1px;
        height: 3000px;
        opacity: 1;
        margin: 0px;
        padding: 0px;
        border-width: 0px;
        border-color: black;
        border-style: solid;
        color: black;
        line-height: 0px;
        background-color: black;
    }

    .eg-name {
        animation: am1;
        /*eg2.1 [name]*/
    }

    .eg-duration-3s {
        animation: am1 3s;
        /*eg2.2 [name] [duration]*/
    }

    .eg-duration-5s {
        animation: am1 5s;
        /*eg2.2 [name] [duration]*/
    }

    .eg-timing-function-linear {
        animation: am1 5s linear;
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-ease {
        animation: am1 5s ease;
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-ease-in {
        animation: am1 5s ease-in;
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-ease-out {
        animation: am1 5s ease-out;
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-ease-in-out {
        animation: am1 5s ease-in-out;
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-steps-step-3 {
        animation: am1 5s steps(3);
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-steps-step-30 {
        animation: am1 5s steps(300);
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-steps-start {
        animation: am1 5s steps(3, start);
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-steps-end {
        animation: am1 5s steps(3, end);
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-cubic-bezier1 {
        animation: am1 5s cubic-bezier(0, 0, 1, 1);
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-timing-function-cubic-bezier2 {
        animation: am1 5s cubic-bezier(1, 0.2, 0, 0.8);
        /*eg2.3 [name] [duration] [timing-function]*/
    }

    .eg-delay-0s {
        animation: am1 5s linear 0s;
        /*eg2.3 [name] [duration] [timing-function] [delay]*/
    }

    .eg-delay-2s {
        animation: am1 5s linear 2s;
        /*eg2.3 [name] [duration] [timing-function] [delay]*/
    }

    .eg-delay--2s {
        animation: am1 5s linear -2s;
        /*eg2.3 [name] [duration] [timing-function] [delay]*/
    }

    .eg-interation-count-2 {
        animation: am1 5s linear 0s 2;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count]*/
    }

    .eg-interation-count-max {
        animation: am1 5s linear 0s infinite;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count]*/
    }

    .eg-direction-normal {
        animation: am1 5s linear 0s infinite normal;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction]*/
    }

    .eg-direction-reverse {
        animation: am1 5s linear 0s infinite reverse;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction]*/
    }

    .eg-direction-alternate {
        animation: am1 5s linear 0s infinite alternate;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction]*/
    }

    .eg-direction-alternate-reverse {
        animation: am1 5s linear 0s infinite alternate-reverse;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction]*/
    }

    .eg-direction-initial {
        animation: am1 5s linear 0s infinite initial;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction]*/
    }

    .eg-direction-inherit {
        animation: am1 5s linear 0s infinite inherit;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction]*/
    }

    .eg-fill-mode-none {
        animation: am2 5s linear 2s 2 normal none;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]*/
    }

    .eg-fill-mode-forwards {
        animation: am2 5s linear 2s 2 normal forwards;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]*/
    }

    .eg-fill-mode-backwards {
        animation: am2 5s linear 2s 2 normal backwards;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]*/
    }

    .eg-fill-mode-both {
        animation: am2 5s linear 2s 2 normal both;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]*/
    }

    .eg-fill-mode-initial {
        animation: am2 5s linear 2s 2 normal initial;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]*/
    }

    .eg-fill-mode-inherit {
        animation: am2 5s linear 2s 2 normal inherit;
        /*eg2.3 [name] [duration] [timing-function] [delay] [interation-count] [direction] [fill-mode]*/
    }

    @keyframes am1 {
        from {
            left: 0px;
        }

        to {
            left: 240px;
        }
    }

    @keyframes am2 {
        from {
            left: 0px;
            background-color: bisque;
        }

        to {
            left: 240px;
            background-color: chartreuse;
        }
    }
</style>