【CSS3】C3动画总结

动画的分类及使用

CSS3中的动画分为：平移动画、过渡动画和自定义动画三种。

• 平移动画：transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew；

• 过渡动画：transition:  transition是一个复合属性，包括：
  transition-property:过渡属性(即哪些元素使用过渡动画)；
  transition-delay：过渡延时；
  transition-duration：过渡时间；
  transition-timing-function：过渡方式（linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认，以低速开始，然后加快，在结束前变慢。 ）
  //注：如果写复合属性，当出现两个时间，则第一个为动画时间，第二个表示延时时间；如果只有一个时间，则表示的时动画时间。

• 自定义动画(帧动画）：animation: 动画名称   时间   运动方式   是否循环;
  animation-name: zidingyi; 动画名称;
  animation-delay: 1s ; 动画延迟时间;
  animation-direction: alternate; 动画的播放方向（alternate表示第135次正向播放，246次反向播放);
  animation-duration: 3s; 动画的播放时间;
  animation-iteration-count: 1; 动画的播放次数 （如果其后的属性值为infinite，则表示自定义的动画一直循环播放;
  animation-play-state: running; 动画播放是否暂停;
  animation-timing-function: linear; 动画的播放方式;
  
  动画播放序列的声明：（两种写法）
  @keyframes[空格] [定义的动画名]{
  方式一：from{ }
                to{ }
  使用“from”和“to”来代表一个动画是从哪开始，到哪结束。也就是说这个 “from"就相当于"0%”，而"to"相当于"100%"

  方式二：0%{ }
               30%{ }
               50%{ }
               80%{ }
               100%{ }

可以在这个规则中创建多个百分比，分别在每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素颜色、位置、大小、形状等。数值段必须是百分数，如果不是百分数，这个keyframes是无效的，不会起任何作用。keyframes的单位只接受百分比值

}

注意事项

• 对同一样式的动画设置不同的延迟时间及动画时间，产生的最终效果可能不同；
• transform和animation这两个属性不能同时使用，否则默认执行animation帧动画，transform属性无用，若要使用该属性，可以再给它包一个div，对这个div设置transform属性（不把两个属性用在同一元素下即可。）；
  部分示例代码如下：

     position: relative;
            transform-style: preserve-3D;
            animation: qiu 10s linear infinite;
        }
        .block>.qiuya:nth-child(1){
            transform: rotatex(30deg) rotatey(30deg);
        }
        .block>.qiuya:nth-child(2){
            transform: rotatex(60deg) rotatey(60deg);

<div class="block">
    <div class="qiuya"></div>
 </div>

• animation有一个属性step可以设置每一帧的间隔时间；
• 使用transform-style: preserve-3d ,可以转换为3D效果;
• 小技巧：如果要同时对一元素进行平移和旋转，个人建议可以先平移后旋转，因为旋转后元素的坐标位置会发生改变，得重新计算平移的方向和像素大小，不太方便，先平移的话就可以很好的解决这一问题；。
• 旋转的中心点不对时，可以通过transform-origin属性来设置，可以加一个边框 来测试一下，修改完后再去掉边框就好了。