CSS3裏的 轉換與過渡動效

1、transform

1.1 2D轉換

經過 CSS3 轉換，可以對元素進行移動、縮放、轉動、拉長或拉伸。

1.旋轉,deg表示角度。負的爲逆時針轉動，默認沿着中心點旋轉。能夠利用 transform-origin 設置旋轉原點。

transform: rotate(30deg);

2.用來設置變形原點，變形時以這個點爲基準點，默認爲50% 50%。

transform-origin: 100% 0;

3.平移變形，兩個參數分別爲橫向偏移量和縱向偏移量。偏移量也能夠是百分比,表示偏移相對自身尺寸的百分比。

transform:translate(50%,50%); 

經過這個屬性可使元素水平和垂直居中：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

4.縮放變形，兩個參數分別表示橫向縮放量和縱向縮放量，小於1表示縮小，大於1表示放大，總之縮放以後爲原尺寸的多少倍 ，變形會使元素中的內容也變形。

transform: scale(1.3,1.3);

1.2 3D轉換

沿X軸旋轉 :

transform: rotateX(-180deg);

相似的，還有 rotateY( ); rotateZ( );

總之，以上2D轉換的效果都有相應的3D轉換，好比3D旋轉，平移，縮放。

設置視野距離:

perspective: 200px;

 2、css3過渡：transition

transition 用來設置元素過渡。

1.至少要設置兩項：過渡的樣式和過渡時間。還能夠設置過渡的速率，速率默認爲ease-in-out（開始和結束塊，中間慢）。linear指勻速。

2.若是多個樣式須要同時過渡，則過渡的名稱寫爲all，基本上和外觀相關的樣式均可以過渡。（但不是全部，例如display，tex-talign等就不能）。

經常使用的是 transition:transform 1s。

3.要過渡的屬性必須有初始值，才能過渡。

border: solid 0 red;

4.過渡只能實現簡單的動畫，從一個狀態到另外一個狀態，不能設置中間狀態。

上面的動畫CSS部分代碼：

#box{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 40px auto;
    border: solid 0 red;
    text-align: center;
    line-height: 100px;
    box-shadow: 4px 4px 4px gray;
    transition: all 2s;            
}
#box:hover{
    transform: rotate(360deg);
    background-color: green;
    border:solid 10px blueviolet;
    opacity: 0.7;
    border-radius: 50%;
    box-shadow: 0 0 200px green;
}

3、關鍵幀動畫:animation與keyframes

查看動畫效果的網站animation.css。

animation設置元素的動畫樣式。要顯示動畫，至少要設置動畫名字和動畫時間

animation-name: move;
/* 動畫單次執行時間 */
animation-duration: 2s;
/* 動畫結束時，讓元素保持動畫開始/結束時的樣式 */
animation-fill-mode: both;
/* 動畫速率，每兩個關鍵幀之間動畫的速率 */
animation-timing-function:linear;
/* 延遲時間 ，能夠設置爲負值，表示提早開始（若是設置了-0.7s，則動畫從0.7處開始執行*/
animation-delay:10s;
/* 設置動畫重複次數，infinite表示無窮次 */
animation-iteration-count:infinite;
/* 設置動畫執行方向，reverse表示反向 */
animation-direction: reverse;
/*設置動畫狀態，running爲執行狀態，pause爲暫停狀態 */
animation-play-state: paused;
/* 回到原始位置 */
animation: none;

關鍵幀@keyframes

建立一個關鍵幀動畫，空格後面是是動畫名字，{}中設定每個關鍵幀的樣式狀態。

@keyframes move{
    0% {left:0;top: 0;}
    25% {left: 50px;top: 0;}
    50% {left: 50px;top: 50px;}
    75% {left: 100px;top: 50px;}
    100% {left: 100px;top: 100px;}
}

css過渡和動畫的區別和聯繫：

它們都能實現動畫。過渡只能在元素 樣式發生改變時爲這個改變添加動畫，不能設置多個關鍵幀。

而關鍵幀動畫是一種動畫方式，能詳細設置每一個關鍵幀狀態，一個動畫設計完成時，能夠添加到多個元素上。

關鍵幀比過渡強大。過渡能作的關鍵幀都能作。而過渡寫起來相對比較簡單。

附華爲官網的動畫效果，純css製做：

貼上代碼：

       *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 412px;
            height: 455px;
            overflow: hidden;
            position: relative;
        }
        .wrap:hover img{
            transform: translatex(-30px);
        }
        .wrap:hover .title{
            transform: translateY(-30px);            
        }
        .wrap:hover .des{
            transform: translateY(-20px);    
            opacity: 1;        
        }
        .wrap:hover .mask{
            background-color: rgba(0, 0,0, 0.5);
            transition: all 0.7s;
        }
        .bg{
            width: 110%;
            max-width: 110%;
            transition: transform 0.7s ease-in-out;
        }
        /* 灰色蒙版 */
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0,0, 0);
        }
        .intro{
            width:60%;
            position: absolute;
            color: white;
            left: 0;
            bottom: 0;
            margin-bottom: 60px;
            padding: 0 0 0 40px;
        }
        .intro .title{
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 10px;
            transition: transform 0.7s;
        }
        .intro .des{
            font-size: 16px;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.7s;
        }

html：

<div class="wrap">
    <img class="bg" src="images/bg.jpg" alt="">
    <div class="mask"></div>
    <div class="intro">
        <h3 class="title">迎接將來世界的正確姿式</h3>
        <p class="des">人工智能應用於醫療、金融、製造、能源、教育等垂直行業，必將與重大的社會經濟變革、教育變革、思想變革、文化變革等同步，成爲下一次工業革命的核心驅動力。</p>
    </div>
</div>