CSS3--------動畫的單屬性、動畫的複合屬性、動畫外屬性

1、動畫名稱:animation-name: donghua;

2、動畫時間:animation-duration: 2s;

3、動畫的方式:和過渡的方式一樣,默認是ease,也可以用貝塞爾曲線,在每個關鍵幀區間,進行一遍動畫方式

4、動畫延時:animation-delay

5、播放狀態 :running 執行 (默認值)
                        paused 暫停

                       animation-play-state: running;

6、動畫次數 :animation-iteration-count: infinite;
                    默認是1次
                    infinite 永久,無窮次數

7、動畫的方向:normal:正常(默認值)
                           reverse 反向
                           alternate 交替(有去有回,一去一回算2次)
                           alternate-reverse 反向一去一回

                          animation-direction:  alternate;

8、複合屬性:

                  動畫名稱 動畫時間  動畫方式 動畫延時 動畫次數 動畫的方向

animation:  donghua        2s        linear         1s        infinite      alternate;

9、動畫外屬性:  backwards: 動畫執行前在起始位置 from
                           forwards:  動畫執行後在結束位置 to
                           both: backwards和forwards;

8、定義關鍵幀區間

@keyframes donghua{
                 第一種: 
                 from{ 
                }
                to{
                } 


                第二種 
                0%{
                }
                25%{
                }
                50%{ 
                }
                75%{  
                }
                100%{
                }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章