css3 的三种动画属性

css3动画属性

1.动画属性

css3动画属性分为：transform、transition、animation

2.transition(过渡)

a:transition-property：检索或设置对象中的参与过渡的属性
b.transition-duration：检索或设置对象过渡的持续时间
c.transition-delay：检索或设置对象延迟过渡的时间
d.transition-timing-function：检索或设置对象中过渡的动画类型

简写：
		transition: 属性值1  属性值2  属性值3  属性值4
属性值1： 需要参与过渡属性   all  ( 能支持过渡属性的都会过渡变换  默认值)
属性值2： 过渡的时间   s秒   ms  毫秒
属性值3： 延迟的时间   s秒   ms  毫秒
属性值4： 动画的类型（匀速、匀加速、匀减速........）

例如：transition:3s 2s linear;

3.transform

2D

a.位移：transform:translate(参数1，参数2)
			参数1：在X轴移动的距离
            参数2：在Y轴移动的距离
            ps:参数如果是正值的情况下：往右往下   负值：往左往上
		单独设置X/Y的位移：
			transform:translateX(参数);
            transform:translateY(参数);
b.缩放：transform:scale(参数1，参数2);
			参数1：X轴缩放的比例 
            参数2：Y轴缩放的比例
            ps:参数小于1,缩小；参数大于1，放大。如果两参数相同，写一个就行
        单独设置X  Y
			transform:scaleX();
			transform:scaleY();
c.旋转：transform:rotate();
			默认情况下围绕中心点转动，转动的是度数，deg!
		单独设置围绕某个轴（X  Y）
			transform:rotateX()
			transform:rotateY()
d.倾斜：transform:skew();
		单独设置围绕某个轴（X  Y）
			transform:skewX()
			transform:skewY()


补充：如果有两个功能函数：先写位移 再写旋转。

单独举例旋转：
当围绕中心点时：

span{
   
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotate(30deg);
        }

当围绕X轴时：

span{
   
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotateX(30deg