animation属相详解

animation属相详解 - @keyframes 用法 -animation案列- @keyframes 案列

一个完整的css animations 是由俩部分组成的：

定义动画的关键帧（运行方式）
该动画的声明

@keyframes

css3 中@keyframes 是用来创建动画的，他可以设置多少帧，每个关键帧表示动画过程的一个状态。

语法格式：

    @keyframes animationName{
        keyframes-selector{css-styles}
    }

animationsName 表示动画的名称，他将作为唯一标识！
keyframes-selector{css-styles}是关键帧选择器！即当前关键帧要应用到整个动画过程中位置的一个百分比！ from 或者 to! from 代表 0% to 代表100%！
css-style 定义执行到当前动画帧时，要执行的对应的动画状态！
以上三个都是必须的 缺一不可

animation属相

animation 属相描述动画的 css 声明，包括指定具体动画以及动画时长等行为！

语法格式

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

    <tr>
        <td rowspan="2">animation</td>
        <td rowspan="2">规定@keyframes 动画的名称</td>
        <td>keyframe-name</td>
        <td>规定需要绑定到选择器的 keyfram 的名称</td>
    </tr>
    <tr>
        <td>none</td>
        <td>规定无动画效果（可用来覆盖级联的动画）</td>
    </tr>

    <tr>
        <td>animation-duration</td>
        <td>规定动画完成一个周期所需要花费时间</td>
        <td>time 值</td>
        <td>以秒或者毫秒计算，默认是0</td>
    </tr>

    <tr>
        <td rowspan="6">animation-timing-function</td>
        <td rowspan="6">规定动画运动的曲线</td>
        <td>linear</td>
        <td>动画从头到尾速度是相同的</td>
    </tr>
    <tr>
        <td>ease</td>
        <td>默认值。动画以低速开始，然后加快，在结束之前变慢。</td>
    </tr>
    <tr>
        <td>ease-in</td>
        <td>动画以低速开始</td>
    </tr>
    <tr>
        <td>ease-out</td>
        <td>动画以低速结束</td>
    </tr>
    <tr>
        <td>ease-in-out</td>
        <td>动画以低速开始和结束</td>
    </tr>
    <tr>
        <td>cubic-bezier(n,n,n,n)</td>
        <td>在cubic-bezier 函数中定义自己的值。可能的值是 0 到 1 的数值 </td>
    </tr>

    <tr>
        <td>animation-delay</td>
        <td>规定动画开始时的延迟， 可选</td>
        <td>time 值</td>
        <td>以秒或者毫秒计算，默认是0</td>
    </tr>

    <tr>
        <td rowspan="2">animation-iteration-count</td>
        <td rowspan="2">规定动画被播放的次数</td>
        <td>n</td>
        <td>定义动画被播放的次数，默认是 1</td>
    </tr>
    <tr>
        <td>infinite</td>
        <td>规定动画无限次循环</td>
    </tr>

    <tr>
        <td rowspan="2">animation-direction</td>
        <td rowspan="2">规定动画是否在下个周期，逆向播放</td>
        <td>normal</td>
        <td>默认值，动画默认播放</td>
    </tr>
    <tr>
        <td>alternate</td>
        <td>动画会轮流反向播放</td>
    </tr>

    <tr>
        <td rowspan="2">animation-play-state</td>
        <td rowspan="2">规定动画是否正在运行，或者暂停</td>
        <td>running</td>
        <td>默认值，规定动画正在播放</td>
    </tr>
    <tr>
        <td>paused</td>
        <td>规定动画已暂停</td>
    </tr>

    <tr>
        <td rowspan="4">animation-fill-mode</td>
        <td rowspan="4">规定对象动画时间之外的状态</td>
        <td>none</td>
        <td>不改变默认行为</td>
    </tr>
    <tr>
        <td>forwards</td>
        <td>当动画完成后，保持最后一个属相值（在最后一个关键帧中定义）</td>
    </tr>
    <tr>
        <td>backwards</td>
        <td>在animation-delay所指定的一段时间内，在动画显示之前，应用开始属相（在第一个关键帧中定义）</td>
    </tr>
    <tr>
        <td>both</td>
        <td>向前和向后填充模式都被应用</td>
    </tr>

</table>

简单案列

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css 动画</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color:#f7f7f7;
        }
        .box{
             400px;
            margin:100px auto;
            animation: rotate 4s linear infinite;
        }
        img{
            display: block;
        }
        @keyframes rotate {
            from {
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(-360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/fengche.png" alt="">
    </div>
</body>
</html>

属相	描述