【小5聊】CSS3動畫屬性animation
阿新 • • 發佈：2021-01-19
【語法】
animation: name duration timing-function delay iteration-count direction;
/*---以下按個人字面英文理解---*/
animation: 名字 持續時間 定時功能 延遲 迭代計數 方向;【解釋】
name：名字，這個比較好理解，就是自己自定義的一個動圖名字。幀狀態的名字
dutation：持續時間，完成一個規則幀所用的時間，比如：1s，完成top從-10px到0px的過程
timing-function：速度曲線！
delay：延遲時間，即延遲一定時間才開始執行動畫
iteration-count：播放次數，infinite=無線次
direction
| 值 | 描述 | 名稱 | 值 |
|---|---|---|---|
| animation-name | 規定需要繫結到選擇器的 keyframe 名稱。。 | 自定義名稱 | myname |
| animation-duration | 規定完成動畫所花費的時間，以秒或毫秒計。 | 時間 | 1s、0.2s等 |
| animation-timing-function | 規定動畫的速度曲線。 | linear | 動畫從頭到尾的速度是相同的。 |
| ease | 預設。動畫以低速開始，然後加快，在結束前變慢。 | ||
| ease-in | 動畫以低速開始。 | ||
| ease-out | 動畫以低速結束。 | ||
| ease-in-out | 動畫以低速開始和結束。 | ||
| animation-delay | 規定在動畫開始之前的延遲。 | time | 可選。定義動畫開始前等待的時間，以秒或毫秒計。預設值是 0。 |
| animation-iteration-count | 規定動畫應該播放的次數。 | n | 定義動畫播放次數的數值。 |
| infinite | 規定動畫應該無限次播放。 | ||
| animation-direction | 規定是否應該輪流反向播放動畫。 | normal | 預設值。動畫應該正常播放。 |
| alternate | 動畫應該輪流反向播放。 |
【簡單使用】
讓文字跳動起來，可以設定top值來實現跳動
- 效果
- css程式碼
<style type="text/css"> div span { float: left; position: relative; } div span:nth-child(1) { -webkit-animation: jump 1s linear 0s infinite alternate; } div span:nth-child(2) { -webkit-animation: jump 1s linear 0.2s infinite alternate; } div span:nth-child(3) { -webkit-animation: jump 1s linear 0.4s infinite alternate; } div span:nth-child(4) { -webkit-animation: jump 1s linear 0.6s infinite alternate; } div span:nth-child(5) { -webkit-animation: jump 1s linear 0.8s infinite alternate; } div span:nth-child(6) { -webkit-animation: jump 1s linear 1.0s infinite alternate; } div span:nth-child(7) { -webkit-animation: jump 1s linear 1.2s infinite alternate; } div span:nth-child(8) { -webkit-animation: jump 1s linear 1.4s infinite alternate; } div span:nth-child(9) { -webkit-animation: jump 1s linear 1.6s infinite alternate; } div span:nth-child(10) { -webkit-animation: jump 1s linear 1.8s infinite alternate; } div span:nth-child(11) { -webkit-animation: jump 1s linear 2.0s infinite alternate; } div span:nth-child(12) { -webkit-animation: jump 1s linear 2.2s infinite alternate; } div span:nth-child(13) { -webkit-animation: jump 1s linear 2.4s infinite alternate; } div span:nth-child(14) { -webkit-animation: jump 1s linear 2.6s infinite alternate; } div span:nth-child(15) { -webkit-animation: jump 1s linear 2.8s infinite alternate; } div span:nth-child(16) { -webkit-animation: jump 1s linear 3.0s infinite alternate; } div span:nth-child(17) { -webkit-animation: jump 1s linear 3.2s infinite alternate; } @-webkit-keyframes jump { 0% { top: 0px; color: #099dff; } 50% { top: -10px; color: #f60; } 100% { top: 10px; color: #0ccdff; } } </style>
- html程式碼
<div style="margin:10px;">
<span>點</span>
<span>擊</span>
<span>上</span>
<span>方</span>
<span>藍</span>
<span>色</span>
<span>字</span>
<span>體</span>
<span>”</span>
<span>有</span>
<span>趣</span>
<span>功</span>
<span>能</span>
<span>“</span>
<span>關</span>
<span>注</span>
<span>TA</span>
</div>