CSS3动画

如何利用长CSS动画实现太极图旋转效果

• 首先我们要先了解CSS动画的属性
  -在CSS动画中有如下几种属性：
  1.animation-name：animation的名字
  2.animation-duration：动画完成一次的时间
  3.animation-delay：动画的延迟时间
  4.animation-iteration-count：动画重复次数（infinite是无限循环）
  5.animation-timing-function：动画的运动方式
  6.animation-direction：动画前进、后退或者来回运动
  除此以外，在animation中还有一个重要的规则，他就是**@Keyframes**规则，这个规则用于指定动画再0%到100%所对应的状态
  当然在实际应用中我们可以选择使用复合样式
  代码如下：

.a{width: 512px;height: 512px;
 animation: taiji 5s 2s infinite  linear;}


@keyframes taiji {  0%{transform: rotate(0); }
                    100%{transform: rotate(360deg);}
    /* 逆战班 */
}

在这里我们要注意几点：
1.复合样式中的两个时间分别是动画完成时间和延迟时间，可根据实际情况进行修改，前后顺序不要乱
2.如果插入的事图片，要设置相应宽高，这样才会以太极中心旋转。
3.linear的作用是消除两次动画之间的停顿，可根据需要来自行更改
4.animation中的名字必须和@Keyframes中对应，否则动画不生效。