CSS animation属性,设置动画
animation属性
CSS animation属性可用于设置HTML元素的动画效果,可包含六个动画相关的属性。
语法
animation: name duration timing-function delay iteration-count direction;
动画相关属性
属性 | 描述 |
---|---|
animation-name | 指定动画名称 |
animation-duration | 指定动画时长 |
animation-delay | 指定动画延迟 |
animation-direction | 指定动画轮流方向播放 |
animation-iteration-count | 设置动画播放的次数 |
animation-timing-function | 设置动画速度变化曲线 |
animation动画实例代码,及在线编辑器
<div id='d1'></div>
<style>
@keyframes animationName{
from{width:20%}
to{width:100%}
}
#d1{width:20%;height:50%;background-color:orange;animation:animationName 2s ease-in-out 0s infinite alternate}
</style>