動畫屬性

@keyframes 關鍵幀 ——> animation 活潑 （配合使用）

transform 變換 ——> transition 過渡 （配合使用）

1、animation

animation : name,完成時間,速度曲線,延遲時間,播放次數,輪流反向播放動畫

animation : name,5s,linear,infinite

屬性作用介紹

• animation-name 規定需要綁定到選擇器的 keyframe 名稱。
  
• animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
  
• animation-timing-function 規定動畫的速度曲線。 常用值值：linear 動畫從頭到尾的速度是相同的。
  
  
• animation-delay 規定在動畫開始之前的延遲。
  
• animation-iteration-count 規定動畫應該播放的次數。常用值值：infinite 無限次播放 。
  
• animation-direction 規定是否應該輪流反向播放動畫。alternate 回來時反向
  

擴展

animation-fill-mode:forwards 讓動畫保持在最後一幀

animation-play-state:paused; 讓動畫在當前幀停止

2、 animation 動畫過渡

transition: 屬性名||all，完成時間，速度曲線，延遲時間;

transition: all 5s linear;

屬性作用介紹

• transition-property 規定設置過渡效果的 CSS 屬性的名稱。
  
• transition-duration 規定完成過渡效果需要多少秒或毫秒。
  
• transition-timing-function 規定速度效果的速度曲線。常用值值：linear 動畫從頭到尾的速度是相同的。
  
• transition-delay 定義過渡效果何時開始。
  

3、transform 該屬性允許我們對元素進行旋轉、縮放、移動或傾斜

rotate 旋轉，scale縮放，skew傾斜，translate移動

4、 box-shadow:水平,垂直,模糊距離,陰影的尺寸,陰影的顏色,將外部陰影 (outset) 改為內部陰影

box-shadow:5px 5px 5px 5px red outset;

實例

@keyframes 關鍵幀 + animation 活潑

.d1{
    animation: mymove 5s linear 1s infinite alternate; 
    -webkit-animation: mymove 5s linear 1s infinite alternate; 
    /*執行動畫mymove  5s內完成  動畫從頭到尾的速度是相同的  無限次播放  回來時反向*/
}

@keyframes mymove
{
    0% {top:0px;}
    100% {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
    from {top:0px;}
    to {top:200px;}
}

transform 變換 + transition 過度

.d1{
    width: 206px;
    height: 206px;
    background: pink;
}

.d1{
    transform: rotate(0deg);
    transition: all 3s linear;
}
.d1:hover{
    transform: rotate(360deg);
}

容易忘記的css屬性和動畫屬性