CSS3 animation

animation

该属性是所有定义动画效果到集合，用于简写。

<style type="text/css">
<!-- 绑定动画 -->
#animation:hover {
 <!-- 参数含义 -->
 <!-- 1 animation-name 动画帧名称 | ani -->
 <!-- 2 animation-duration 动画时间 | 1秒 -->
 <!-- 3 animation-timing-function 动画效果 | 默认，贝塞尔曲线  -->
 <!-- 4 animation-iteration-count 循环此时 | 2次  -->
 <!-- 5 animation-direction 运动方向 | 默认向前  -->
 <!-- 6 animation-delay 延迟动画 | 0秒，不延迟  -->
 <!-- 7 animation-fill-mode 是否返回 | none，按照 @keyframes 设置到预期顺序执行 -->
 animation: ani 1s ease 2 normal 0s none;
}

<!-- 定义动画 -->
@keyframes ani {
 0% {
  margin-left: 0px;
 }
 50% {
  margin-left: 200px;
 }
 100% {
  margin-left: 0px;
 } 
}
</style>

<div style="width:100px; height:100px; background:orange;" id="animation"></div>

动画效果