css3的動畫(animation)屬性的詳解(附代碼)

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於css3的動畫(animation)屬性的詳解(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

css3動畫(animation)具有以下屬性:

1、animation-name 自訂動畫名稱
2、animation-duration 動畫指定需要多少秒或毫秒完成,預設值是0;
3、animation-timing-function 動畫的時間曲線,linear 勻速, ease 先慢後快,結束前變慢 。
4、animation-delay 動畫在啟動前的延遲間隔,預設是0
5、animation-iteration-count 動畫的播放次數,預設是1
6、animation-direction 是否輪流反向播放動畫
7、animation-play-state 動畫是否正在運行或已暫停。 值:paused 指定暫停動畫 ; running 指定正在啟動並執行動畫,預設。

執行個體:本demo以平移(translate)為例說明動畫的整個過程

html:

<body><div class="warp"></div></body>

css:

.warp{    height: 100px;     width: 100px;     border: 1px solid #eee;            animation-name:moves;            animation-direction:alternate;            animation-delay: 0.2s;            animation-duration: 5s;            animation-play-state: paused;            animation-iteration-count: 3;           /*以上可以簡寫成:*/           animation: moves 5s linear 0.2s 3;}

@keyframes moves{                           /*動畫名稱自訂*/10%{                                    /*時間點可以任意,10%表示當時間進行到10%是元素要達到的狀態*/transform: translate(100px,0);       -ms-transform:translate(100px,0); /*IE 9*/ -moz-transform:translate(100px,0); /* Firefox */-webkit-transform:translate(100px,0); /* Safari 和 Chrome */-o-transform:translate(100px,0); /* Opera */}30%{                                    /*時間點可以任意*/transform: translate(100px,100px);-ms-transform:translate(100px,100px); /*IE 9*/ -moz-transform:translate(100px,100px); /* Firefox */-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */-o-transform:translate(100px,100px); /* Opera */}60%{                                       /*時間點可以任意*/transform: translate(0,100px);-ms-transform:translate(0,100px); /*IE 9*/ -moz-transform:translate(0,100px); /* Firefox */-webkit-transform:translate(0,100px); /* Safari 和 Chrome */-o-transform:translate(0,100px); /* Opera */}100%{                                /*時間點可以任意*/transform: translate(0,0);-ms-transform:translate(0,0); /*IE 9*/ -moz-transform:translate(0,0); /* Firefox */-webkit-transform:translate(0,0); /* Safari 和 Chrome */-o-transform:translate(0,0); /* Opera */}}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.