animation 动画

animation 动画

animation 是动画，而 transition 是过渡，它们用法很相似，但实际又不大相同，可以说 animation 是 transition 的升级版，它可以创建一个持续的自动执行动画。

1. 官方定义

animation 属性是一个简写属性，它是下面属性的缩写：

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

注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

2. 慕课解释

animation 是几个属性值的缩写，我们定义一个动画通常使用 animation 就足够了，如果想单独改变动画的某些属性可以使用单独的动画属性去改变，构成一个动画的最基本属性需要 一个@keyframes 和 duration。

3. 语法

.demo{
    animation: name duration timing-function delay iteration-count direction;
}

属性值说明：

animation-direction 参数值详解：

animation-fill-mode 参数值详解

4. 兼容性

5. 实例

1. 使用 from to 定义一个名字为 go 的 @keyframes 的动画。

 @keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ;
}

效果图

说明：这是最简单的动画创建方式，使用 @keyframes 命名一个叫做 go 的动画，再为这个动画加上一个 2s 的持续时间 ，构成了最简单的动画，但是它只播放一次。

2. 对上面的例子进行改造，通过设置动画函数，修改动画执行的快慢。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in;
}

效果图

说明：通过在 animation 增加第 3 个参数 animation-timing-function 动画函数，它可以改变动画运动的速度曲线，要注意的是，不管怎么改变动画的结束时间是不会变的。具体可以看 timing-function 的介绍

3. 继续对上面例子增加一个延迟实现 3s后在执行动画。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 3s;
}

效果图

说明：动画延迟了 3 秒开始再次执行了。

4. 增加 animation-iteration-count 修改上面例子动画的播放次数。

动画延迟 3s开始播放播放 2 次结束

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 3s 2;
}

效果图

说明：通过效果图可以很清楚的看到了动画反复执行了两次，值得注意的这个 3s 的延迟只针对第一次动画开始前，在动画开始之后重复循环的时候就不再起作用了。

动画延迟 3s 开始播放，然后无限循环。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 3s infinite;
}

效果图

说明：通过 infinite 动画在经过 3s 的延迟之后开始无限的循环了。

5. 延续上面的例子，我们发现动画每次循环都是从开始的位置开始循环的，下面通过添加 animation-direction 来改变动画在循环过程中是否反向。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 3s infinite reverse;
}

效果图

说明: 使用 alternate 在奇数时候反向

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 3s infinite alternate;
}

效果图

6. animation-fill-mode 设置动画的初始或结束状态。

单次动画使用 forwards 设置动画结束之后使用结束后的状态作为样式。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 1s  forwards;
}

效果图

在设置延迟之后元素使用 backwards 设置动画的开始的状态。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 1s  backwards;
}

效果图

解释：在鼠标刷新浏览器我们看到本应该 100px 宽度的元素是以 200px 开始的，当动画结束之后，回到了 100px。

both 在设置动画延迟情况下，元素使用开始的状态，并在整个动画结束之后使用结束之后的状态。

@keyframes go{
    from{
        width:200px;
    }
    to{
        width:500px
    }
}
.demo{
    width:100px;
    height:100px;
    background: #000;
    animation:go 2s ease-in 2s  both;
}

效果图

6. 经验分享

1. 当动画造成页面的卡顿，可以用下面这种方式尝试解决：
   开启 GPU 加速 例如使用 transform:transition3d(0,0,0)。

2. 有时候需要实现鼠标 hover 到元素上，出现一个提示如果使用 transition 过渡属性发现总是不能实现这个效果，而 animation 是可以解决的

<div class="demo">
    往事不要再提<span>人生已多风雨</span>
</div>

.demo{
    cursor: pointer;
}
.demo>span{             
    display: none;  
}
.demo:hover>span{
    display: block;
    animation: shows 1s forwards;
}
@keyframes shows {
    from{
        opacity: 0;
    }to{
        opacity: 1;
    }
}

效果图

解释： transition 不能实现（隐藏/显示）之间的过渡效，果原因是 diaplay:none 设置之后虽然元素在页面中，但是这个标签不在浏览器的渲染进程里面。如果这个元素属性为 display：block 相当于元素从新渲染出来，这时里面的 opacity: 0 到 1 就不起作用了。
所以这里使用 animation 正好可以弥补这个问题。

7. 小结

1. 尽量停止不可以见的动画，以减少卡顿。
2. 尽量使用 transform 属性完成动画内部属性的切换，因为它是使用 GPU 计算的，也会提升动画的性能。