CSS3學習筆記——動畫

CSS3中的動畫功能分為Transitions功能和Animations功能；

  1.Transitions功能

        支援從一個屬性在指定時間内平滑過渡到另一個屬性值；

transitions功能具有的屬性：

    1）transition-property：哪種屬性平滑過渡；

    2）tranition-duration：在多久時間内完成屬性的平滑過渡；

    3）tranition-timing-function：通過什麼方法進行平滑過渡；

    4）tranition-delay：指定變換動畫特效延遲多久後開始執行；

這四個可以分開一一設定，也可以直接進行屬性連寫；

   transition:property duration timing-function delay;

  eg: transition:background-color 1s linear 2s; 

還可以同時平滑過渡多個屬性值

  eg:  transition:background-color 1s linear,color 1s linear,width 1s linear;

可以通過改變元素的位置屬性值，實作變形處理的transform屬性值來讓元素實作移動、旋轉等動畫效果；

img{
        position: absolute;
        top: 70px;
        left: 0;
        transition: left 1s linear, transform 1s linear;
}
div:hover img{
        position: absolute;
        left: 30px;
        transform: rotate(720deg);
}
           

 缺點：

隻能指定屬性的開始值與終點值，然後在這兩個屬性值之間實作平滑過渡，不能實作更為複雜的動畫效果；

  2.Animations功能

       支援通過定義多個關鍵幀以及每個關鍵幀中元素的屬性值的指定來實作更為複雜的動畫效果；

    1）組成

       @keyframes 名字{

         開始幀（0%）{屬性：值；}

         關鍵幀（任意想變化的百分位置）{屬性：值；}

         結束幀（100%）{屬性：值；}

      }

     選擇器名{

         keyframe的名稱 （animation-name）

         動畫的執行時長 （animation-duration）

         動畫的實作方法 （animation-timing-function）

        延遲多少秒後開始執行動畫 (animation-delay) (機關：秒或毫秒)

        動畫執行的次數 （animation-iteration-count）  也可以執定infinite(無限次)

        動畫執行的方向（animation-direction）

     }

①  animation-direction可指定的屬性值包括：

     normal：初始值（動畫執行完畢後傳回初始狀态）        alternate：交替更改動畫的執行方向

    reverse：反方向執行動畫                   alternate-reverse：從反方向開始交替更改動畫的執行方向

② animation-timing-function可指定的屬性值：（指定動畫的改變狀态的速度）

  linear：勻速     ease-in：慢-->曲線加快    ease-out：快-->曲線放慢     ease：慢-->快-->慢    ease-in-out：慢-->快-->慢

③ opacity屬性實作頁面淡入效果（經常使用）

   通過在開始幀與結束幀中改變頁面的opacity屬性的屬性值來實作效果；

④ 如果要想實作讓多個屬性值同時變化的動畫，隻需要在各個關鍵幀中同時指定這些屬性值就可以了；

div{
    position: absolute;
    background-color: yellow;
    top:100px;
    width:500px;
}
@keyframes mycolor{
    0%{
           background-color: red;
           transform: rotate(0deg);
           opacity: 0;
    }
    40%{
            background-color: darkblue;
            transform: rotate(30deg);
    }
    70%{
            background-color: yellow;
            transform: rotate(-30deg);
    }
    100%{
            background-color: red;
            transform: rotate(0deg);
            opacity: 1;
    }
}
div:hover{
    animation-name: mycolor;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
}