css中的transform,transition,animation

最近被要求做一些网页上的动画效果，搜索之后知道了css可以做到flash的一些动画效果，可是都是拿来就用，没有在脑海中整理过，现在就来梳理一下css中的动画使用方法。

　　transform

　　主要用来做元素的特殊变形，是css的一个静态属性。没有动画过渡效果。

.a:hover {

    transform:rotate(180deg);  /* 统一标识 */

    -webkit-transform:rotate(180deg);  /* 谷歌内核识别码 */

    -moz-transform:rotate(180deg);  /* 火狐内核识别码 */

    -o-transform:rotate(180deg);  /* opera内核识别码 */

    -ms-transform:rotate(180deg);  /* ie内核识别码 */

}

　　

 

　　Transition

 

　　是一个简单的动画属性，给链接添加上transition属性就可以实现过渡效果：　　

.a{

    transition:All 0.8s ease-in-out;

    -webkit-transition:All 0.8s ease-in-out;

    -moz-transition:All 0.8s ease-in-out;

    -o-transition:All 0.8s ease-in-out;

}

　　

　

　　Animation

　　animation中有关关键点：keyframes.

　　keyframes 语法规则：代表不同时间点元素的变化程度。wobble 代表动画的名称。例如

@-webkit-keyframes 'wobble' {

     0% {

        margin-left: 100px;

        background: green;

     }

     40% {

        margin-left: 150px;

        background: orange;

     }

     60% {

        margin-left: 75px;

        background: blue;

     }

     100% {

        margin-left: 100px;

        background: red;

     }

  }

　　然后在css使用以上定义好的动画即可：　　

<style>

    @-webkit-keyframes rotate{

    from{-webkit-transform:rotate(0deg)}

    to{-webkit-transform:rotate(360deg)}

    }

    @-moz-keyframes rotate{

    from{-moz-transform:rotate(0deg)}

    to{-moz-transform:rotate(360deg)}

    }

    @-ms-keyframes rotate{

    from{-ms-transform:rotate(0deg)}

    to{-ms-transform:rotate(360deg)}

    }

    @-o-keyframes rotate{

    from{-o-transform:rotate(0deg)}

    to{-o-transform:rotate(360deg)}

    }

    .tupian{

    -webkit-animation-name:rotate;/*定义一个动画的名称*/

    -webkit-animation-duration:7s;/* 表示动画持续的时间 */    

    -webkit-animation-iteration-count:infinite;/* 用来指定元素循环的次数，这里定义无限循环 */

    -webkit-animation-timing-function:linear;/* 动画的播放方式：ease ease-in ease-out ease-in-out */

    -webkit-animation-delay:0s; /*元素动画开始的时间 */

    -webkit-animation-direction：normal;/* 表示动画的方向 alternate 奇偶相反 */

    /* 复合属性 */

    /*-webkit-animation: name duration timing-function delay iteration_count direction;*/

    }

    </style>

总结：

Transform

•定义和用法
•transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
•rotate(angle )定义 2D 旋转，在参数中规定角度
•rotateX(angle)定义沿着 X 轴的 3D 旋转。
•rotateY(angle)定义沿着 Y 轴的 3D 旋转。
•rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
•scale(x,y)定义 2D 缩放转换。
•scale3d(x,y,z)定义 3D 缩放转换。
•scaleX(x)通过设置 X 轴的值来定义缩放转换。
•scaleY(y)通过设置 Y 轴的值来定义缩放转换。
•scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

•浏览器支持
•Internet Explorer 10、Firefox、Opera 支持 transform 属性。
•Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
•Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
•Opera 只支持 2D 转换。

---

Transition

•定义和用法
•transition 属性是一个简写属性，用于设置四个过渡属性：
•transition-property
•transition-duration
•transition-timing-function
•transition-delay
•语法
•transition: property duration timing-function delay;
•值描述
•transition-property规定设置过渡效果的 CSS 属性的名称。
•transition-duration规定完成过渡效果需要多少秒或毫秒。
•transition-timing-function规定速度效果的速度曲线。
•transition-delay定义过渡效果何时开始(延时执行时间)。

•浏览器支持
•Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
•Safari 支持替代的 -webkit-transition 属性。
•注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。