基础知识

通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。

过渡动画是两个状态的变化，帧动画可以处理动画过程中不同时间的细节变化。不过对过渡动画理解后不习惯帧动画非常容易，也可以把帧动画理解为多个帧之间的过渡动画。

关键帧

使用@keyframes规则配置动画中的各个帧

form表示起点
to表示终点
可以使用百分数如20%动画运行到20%时间。

基本使用

使用@keyframes定义动画并配置两个帧动作from和to，然后再div元素中使用animation-name引用了动画并使用animation-duration声明执行三秒

动画命名不要使用css关键字如none

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding: 80px;
        }
        main{
            width: 400px;
            height: 400px;
        }
        div{
            width: 150px;
            height: 150px;
            background-color: #fff;
            border: solid 20px #ddd;
            animation-name: l;
            animation-duration: 3s;
        }

        @keyframes l{
            from{
                opacity: 0;
                transform: scale(.1);
            }
            to{
                opacity: 1;
    
            }
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

时间点

帧动画需要定义在不同时间执行的动作，开始与结束可以使用form/to或0%/100%声明。

必须添加百分号，25%是正确写法
时间点没有顺序要求，即100%写在25%前也可以
未设置0%与100%时将使用元素原始状态

物体移动

定义不同时间点让物体元素移动一圈，可以不设置from/to系统将定义元素初始状态。

css

@keyframes hd {
        0% {}

        25% {
            transform: translateX(300%);
        }

        50% {
            transform: translate(300%, 300%);
        }

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

        to {}
    }

使用动画

使用animation-name规则可以在元素身上同时使用多个动画。

使用多个动画时用逗号分隔
多个动画有相同属性时，后面动画的属性优先使用

css

animation-name: l,scale;
animation-duration:3s

动画时间

使用animation-duration可以声明动画播放时间，即把所有帧帧行一遍所需要的时间。

可以使用m秒，ms毫秒时间单位
可以不同动画单独设置执行时间
如果动画数量大于时间数量，将重新从时间列表中计算

重复动画

使用animation-iteration-count规则设置动画重复执行次数，设置值为infinite表示无限循环执行。

可同时设置元素的动画重复，使用逗号分隔
如果动画数量大于重复数量定义，后面的动画将重新计算重复

css

<style>
    .heart {
        width: 200px;
        height: 200px;
        background: #e74c3c;
        transform: rotate(45deg);
        position: relative;
        animation-name: heart;
        animation-duration: 1s;
        animation-iteration-count: 100;
    }

    .heart::before {
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #e74c3c;
        position: absolute;
        transform: translate(-50%, 0px);
    }

    .heart::after {
        content: '';
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #e74c3c;
        position: absolute;
        transform: translate(0%, -50%);
    }

    @keyframes heart {
        from {
            transform: scale(.3) rotate(45deg);
        }

        to {
            transform: scale(1) rotate(45deg);
        }
    }
</style>

<main>
	<div class="heart"></div>
</main>

动画方向

使用animation-direction控制动画运行的方向

选项	说明
normal	从0%-100%运行动画
reverse	从100%-0%运行动画
alternate	从0%-100%、100%-0%
alternate-reverse	从100%-0% 0%-100%

css

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h2 {
            color: #f39c12;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: #34495e;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        ul {
            width: 400px;
            height: 100px;
            display: flex;
        }

        li {
            list-style: none;
            text-align: center;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;
        }

        li span {
            font-size: 10px;
            color: #ecf0f1;
        }

        i.fa {
            font-size: 30px;
            margin: 5px;
            color: #e74c3c;
            animation-name: hd;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        li:nth-child(1)>i.fa {
            animation-direction: normal;
        }

        li:nth-child(2)>i.fa {
            animation-direction: reverse;
        }

        li:nth-child(3)>i.fa {
            animation-direction: alternate;
        }

        li:nth-child(4)>i.fa {
            animation-direction: alternate-reverse;
        }

        @keyframes hd {
            from {}

            to {
                opacity: 1;
                transform: scale(3);
            }
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <span>normal</span>
        </li>
        <li>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <span>reverse</span>
        </li>
        <li>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <span>alternate</span>
        </li>
        <li>
            <i class="fa fa-heart" aria-hidden="true"></i>
            <span>alternate-reverse</span>
        </li>
    </ul>
</body>

延迟动画

使用animation-delay规则定义动画等待时间后执行

动画速率

系统属性

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值

步进速度

过渡使用阶梯化呈现，有点像现实生活中的机械舞，下面是把过渡分五步完成。

选项	说明
steps(n,start)	设置 n 个时间点，第一时间点变化状态
steps(n,end)	设置 n 个时间点，第一时间点初始状态
step-start	等于 steps(1,start)，可以理解为从下一步开始
step-end	等于 steps(1,end)，可以理解为从当前步开始

播放状态

使用animation-play-state可以控制动画的暂停与运行

选项	说明
paused	暂停
running	运行

幻灯片

图片切换使用steps步进animation-play-state播放状态技术

填充模式

animation-fill-mode用于定义动画播放结束后的处理模型，是回到原来状态还是停止在动画结束状态。

选项	说明
none	需要等待延迟结束，起始帧属性才应用
backwards	动画效果在起始帧，不等延迟结束
forwards	结束后停留动画的最后一帧
both	包含backwards与forwards规则，即动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧。

css

animation-fill-mode:none;
animation-fill-mode:backwards;
animation-fill-mode:forwards;
animation-fill-mode:both;

组合定义

和 CSS 中的其他属性一样，可以使用animation组合定义帧动画。animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

必须存在 animation-duration属性，否则过渡时间为 0 没有动画效果。

基础知识 ​

关键帧 ​

基本使用 ​

时间点 ​

物体移动 ​

使用动画 ​

动画时间 ​

重复动画 ​

动画方向 ​

延迟动画 ​

动画速率 ​

系统属性 ​

步进速度 ​

播放状态 ​

幻灯片 ​

填充模式 ​

组合定义 ​