3.animation【动画】

3.animation【动画】

1.位移

transform:translate(x,y);
transform:translateX(); //x： + 右位移  - 左位移
transform:translateY(); //y:  + 下位移  - 上位移

2.旋转

transform:rotate(90deg);    //正值：顺时针

3.缩放

transform:scale(x,y);       //值>1：放大  0~1：缩小
transform:scalex(); 
transform:scaleY();

4.扭曲倾斜

transform:skew(x,y);        //x:水平扭曲，y：垂直扭曲
transform:skewX(30deg);
transform:skewY();

5.3D旋转

transform:rotateX();
transform:rotateY();

6.过度时间

transition：transform 1s;

7.动画属性

animation-name：heart; //动画名称
animation-duration：1s; //动画时间
animation-timing-function：10; //动画的速度曲线
animation-delay：1s;     //动画开始前的延迟。
animation-iteration-count：5; //动画播放次数。
animation-direction：true;   //是否轮流反向播放

8.【心跳案例】

<div id="mydiv"></div>

#mydiv
    {   
       width:"100px";
       height:"100px";
       animation: heart 0.5s infinite;  /* infinite：无限循环 */
       -moz-animation: heart 0.5s;  /* Firefox */
       -webkit-animation: heart 0.5s;   /* Safari 和 Chrome */
       -o-animation: heart 0.5s;    /* Opera */
        0%: 
          transform: scale(1);
        50%:
          transform: scale(1.3); 
        100%: 
          transform: scale(1);
    }