transition和animation

transiton

.pic {
    &:hover {
        transform: rotate(45deg); //旋轉45度
    }
    transition: transform 1s ease-out; 
}

animation

animation基礎和寫法

①動畫名稱（name）--@keyframes，與transition不同的是，animation需要自定義一個名稱②過渡時間（duration）延遲時間（delay）③時間函數（timing-function）④播放次數（iteration-count）⑤播放方向（direction），即是否輪流播放和反向播放⑥停止播放的狀態（fill-mode），⑦是否暫停（play-state）

⑤的屬性值：alternate：先正向後反向；reverse：反向播放

.pic {
    &:hover {
        animation: move 2s linear infinite alternate forwards;
    }
}

@keyframes move {
    100% {
        transform: translateX(200px);//水平偏移200px
    }
}

animation: move 2s linear infinite alternate forwards;

//設置 動畫名稱 延遲時間

動畫函數 （1）linear勻速運動（2）ease開始緩慢 中間快速 最後緩慢（3）ease-in 開始慢

               （4）ease-out 結尾慢 （5）ease-in-out 開始和結束慢
播放次數 （infinite無限播放）
播放順序（reverse反向播放，alternate輪流播放）
停止狀態（forwards播放指定的次數後停止  running無限播放）