css3动画及案例

css3动画

1、2d动画

translate() ：平移。根据左（X轴）和顶部（Y轴）位置给定的参数，从当前位置移动。
rotate() ：旋转。在一个给定度数顺时针旋转的元素，负值是允许的，这样的元素逆时针旋转。（如rotate值（30deg）元素顺时针旋转30度。）
scale() ：伸缩。该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。如（scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。）
skew() : 变形。包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

2、过度动画

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果（过渡 过渡的是元素的属性值）。要实现这一点，必须规定两项内容：

1. 指定要添加效果的CSS属性
2. 指定效果的持续时间。
   例：

b{
            width: 100px;
            height: 100px;
            background: red;
            margin-left: 0;
            transition-delay /动画的延迟/
            transition-delay:1s;
            transition-duration /动画的执行时间/
            transition-duration: 1s;
            transition-timing-function动画的执行方式  linear 匀速 ease-in  慢开   ease-in-out 慢开慢关*!/
            transition-timing-function: linear;
            transition-property  过渡什么属性  margin-left  如果要过渡多个属性 分开  all 过渡所有属性*!/
            transition-property:margin-left;*/
            transition: margin-left 1s 1s linear;
        }
        .b:hover{
            margin-left: 50px;
        }

3、帧动画

   		动画名称
    	animation-name:animate ;
		动画执行时间
        animation-duration: 5s;
        动画执行方式*
        animation-timing-function: linear;
        动画的延迟
        animation-delay: 1s;
        动画播放多少次   infinite循环播放
        animation-iteration-count: 1;
        播放方式  alternate  奇偶播放
        animation-direction: alternate;
        动画是否播放 paused
        animation-play-state: running;
        animation:animate（名字） 1s（） 2s linear infinite alternate;
        动画停止到完成位置
        animation-fill-mode: forwards

4、css3 3d转换

rotateX()
rotateY()
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div
{
         transform: rotatex(-75deg);
          transform-style: preserve-3d;
	
}

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div
{
         transform: rotatey(-75deg);
            transform-style: preserve-3d;
}