前端工程已經有許多能製作動畫的工具，除了透過GSAP、anime.js等工具撰寫js來完成，而今天先從較單純的CSS動畫講起，。在今天這篇文章，我們主要以CSS完成一些簡單動畫。

看一個基本的CSS動畫怎麼寫:

<div class="green-box"></div>

.green-box{
    background-color: rgb(5, 80, 24);
    width: 120px;
    height: 120px;
    transition: all 2s ease;
}
.green-box:hover{
    transform: translateX(50px);
    background-color:red
}

如果你將這些程式貼到自己的網站上並執行，會發現這是一個滑鼠碰到後會往右邊滑行並變色的方塊，我們來逐一解釋那些程式讓他達到這樣的效果。

transition

transition的中文意思是"過渡"，它的用處就是在調整動畫進行的過程，他後面的三個屬性分別是"想要有動畫的樣式"、"動畫執行時間"、"動畫播放時的速度分配"，先來解釋第一個屬性，以上面範例為例，假如你只希望移動屬性有動畫，不希望變色有動畫，那你可以把transition那行改成:

transition:trasform 2s ease;

而如果想要全部屬性都有動畫就可以打all就好，第二個參數應該無需過多解釋，就是動畫執行時間，如果不同屬性想要有不同執行時間也可以分開設置，最後一項是寫動畫常會接觸的屬性，詳細可以參考這篇。

:hover觸發事件

觸發方法可以有很多種，如click等...，如果動畫不設置觸發條件，他就會在網站剛載入好的時候觸發。

:transform

這是一個動畫非常重要的屬性，其他的動畫製作工具也會有跟transform相關的屬性在。trasform主要有三個面向，分別是位移、縮放、旋轉。對應的屬性為traslate、scale、rotate，而這些屬性還可以分別針對X、Y、Z軸進行。假如我們要上面那個範例的方塊向右上移動、放大成2倍，以Y軸為軸心旋轉30度，可以將transform改成這樣:

transform:translate(20px,30px) scale(2) rotateY(30deg);

可以發現，我們可以在屬性後面加上X、Y、Z來爭對某些軸操作，或直接指定各軸的型變量。
另外，使用transform操作dom物件有一些特性，旋轉跟位移跟縮放預設都是以物件中心為基準點，而基準點也可以自訂。使用transform移動、縮放物件和使用top、left、width等屬性製作動畫的差別是，使用transform會保留dom元件本來的位置和空間，不會擠壓到其他dom元件，能避免畫面跑版；而在網頁的生命週期中，使用transform只需要repaint(重繪)畫面，而使用top、width等標籤的話會動到dom元件的空間，需要先reflow再repaint，執行的效率差別挺大的，所以一般來說用transform做動畫比較正規。

進階範例-翻牌效果

廢話不多說，直接先上程式
HTML:

<div class="card-container">
     <div class="card-outer">
       <div class="card1"></div>
       <div class="card2"></div>
     </div>
</div>
 

SCSS:

.card-container{
    width: 200px;
    height: 300px;
    background-color: rgb(187, 187, 187);
    padding: 5px;
    &:hover .card-outer{
        transform:perspective(300px) rotateY(180deg) ;
        //perspective(300px)設定透視的距離，把這個數值改成100並執行看看你就知道差別了
        
    }
}

.card-outer{
    width: 100%;
    height: 100%;
    position:relative;
    transition: all 1s ease-in-out;
   
    transform-style: preserve-3d; //開啟3D透視
    
 @mixin cardstyle{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
backface-visibility:hidden;
}
.card1{
    @include cardstyle;
    background-color: red;
    z-index: 1; //正面index要設高一點
}
.card2{
    @include cardstyle;
background-color: blue;
transform: rotateY(180deg); //藍色卡牌先轉到背面

}
}

程式有用到一點SCSS，主要是用@mixin寫了card的共同樣式，並用@include加入card的類別，應該不會太難，哈XD

執行起來的效果應該是如下，一張紅色的卡牌被hover時會轉到背面，秀出背面的藍色

大部分沒講過的都透過註解來解釋了，大家參考看看