CSS3中的过渡动画以及添加动画规则

之前的网页实现动画效果必须依赖Flash或js，CSS3动画效果属性主要分为三类：过渡、变换、动画。但是这些CSS属性在Android和iOS上使用都必须使用私有前缀-webkit-。

• 浏览器对动画的兼容性支持：

  
  

  

1、过渡

要实现这个效果，必须考虑两点，变换样式使用的CSS属性和变换样式变化的时长，设置过渡要用CSS属性transition，语法形式如下：

 -webkit-transition: 属性名称  过渡时间  速度曲线  过渡延迟时间

其中，前面两个参数是必填的，后面两个参数是可选的，示例：

            div {
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background-color: cadetblue;
                /* 设置宽度和高度的变换时间为2s */
                -webkit-transition: width 2s, height 2s;
            }
            div:hover {
                width: 200px;
                height: 200px;
            }

当鼠标悬浮时，div的高度和宽度变化的过渡，如果所有的属性变化的时间一样长，过渡属性还可以设置为：

-webkit-transition:all 2s;

至于速度曲线，它的取值说明如下：

2D以及3D的变换

CSS中的变换属性transform可以动态的控制一些HTML标签元素，让其在页面进行移动、缩放、倾斜、或结合过渡效果产生一些动画效果。

2D变换

• 平移：需要使用translate方法，指定中心点的x,y坐标的偏移量，值可以是负数，表示反方向移动元素，元素平移后，它原有的位置继续保留。

-webkit-transform: translate(50px, 100px);//水平向右偏移50像素，垂直向上偏移100像素

• 旋转：需要使用rotate方法，角度的单位用deg表示，默认的是顺时针，值可以使用负数，表示逆时针旋转

-webkit-transform: rotate(30deg); //绕中心点顺时针旋转30度

• 缩放：需要使用scale方法，指定宽度和高度的缩放比例，比例可以是小数。

-webkit-transform: scale(0.5, 0.5); //宽高缩放一半

• 倾斜：需要使用skew方法，指定相对于x轴和y轴的倾斜角度

-webkit-transform: skew(10deg, 10deg); //相对于X轴和Y轴都倾斜10度

3D变换

transform属性的3D变换主要是让元素绕X轴，Y轴进行的。

• X轴旋转：需要使用rotateX方法，指定旋转的角度，单位为deg，默认为顺时针旋转，值为负数则为逆时针。

-webkit-transform: rotateX(120deg); //绕X轴顺时针旋转120度

• Y轴旋转：使用方法与rotateX一样

-webkit-transform: rotateY(120deg); //绕Y轴顺时针旋转120度

CSS3中的一些动画控制

CSS中除了支持渐变、过渡和变换旋转的效果，还支持更加强大的动画效果实现，它提供了一种动画控制属性animation，可以用来设置更加复杂的动画效果，例如：控制动画的动画次数，逆向动画，动画的播放和暂停等
要使用animation动画控制属性，首先需要定义动画规则，动画的定义规则使用的是@keyframes规则，用它来定义动画中的关键帧，它的语法形式有两种：一种是只设置起始和终点的动画帧，另外一种是使用百分比来细化动画帧

• 只设置起始的动画帧：

@-webkit-keyframs  写上你的动画规则名称{
  from{
    // CSS属性的设置
  }
  to {
   // CSS属性的设置
  }
}

• 百分比定义动画帧：

@-webkit-keyframes 写上你的动画规则名称 {
  0% {
    // CSS属性的设置
   }
  25% {
    // CSS属性的设置
  }
  50% {
    // CSS属性的设置
  }
  100% {
    // CSS属性的设置
  }
}

定义好动画帧，就可以使用animation属性进行动画的控制了，代码如下：

-webkit-animation: name duration timing-function delay iteration-count direction'

• name：用@keyframes已定义好的动画规则名称
• duration：动画花费的时间
• timing-function：动画的速度曲线，如:linear...
• delay：动画的延迟时间
• iteration-count：动画的播放次数
• direction：动画逆向播放，默认值为normal，alternate表示动画的轮流反向播放
  示例：

        .img-box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border-radius:150px;
        }
        .img-box img {
            width: 300px;
            height: 300px;
            border-radius:50%;
            overflow: hidden;
        }
        @-webkit-keyframes myAnimation{
            from{
              -webkit-transform: rotate(0deg);
            }
            to{
              -webkit-transform: rotate(360deg);
            }
        }
        
        .myRotate {
            -webkit-animation: myAnimation 9s linear 0s 10 ;
        }