3.animation【動畫】

1.位移

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

2.旋轉(zhuǎn)

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旋轉(zhuǎn)

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; //動畫播放次數(shù)。
animation-direction：true;   //是否輪流反向播放

8.【心跳案例】

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

#mydiv
    {   
       width:"100px";
       height:"100px";
       animation: heart 0.5s infinite;  /* infinite：無限循環(huán) */
       -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);
    }