學(xué)習(xí)css 動畫榨为，建立小球左右橫移的動畫
原料：html5 Css3
html
<body>
<div class="ball"></div>
</body>
CSS
<style type="text/css">
/* 繪制小球 */
.ball {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 20px;
background: black;
}
/* 定義關(guān)鍵幀 */
@keyframes animation-name-you-pick {
0% {
background: blue;
transform: translateX(0);
}
50%{
background: purple;
transform: translateX(100px);
}
100%{
background: red;
transform: translateX(200px);
}
}
/* 定義動畫 */
.ball {
animation-name: animation-name-you-pick;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction:alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
</style>
css 動畫屬性介紹
| 屬性 | 描述 |
|---|---|
| @keyframe | 規(guī)定動畫 |
| animation | 所有動畫屬性的簡寫屬性论泛，除了 animation-play-state 屬性。 |
| animation-name | 規(guī)定 @keyframes 動畫的名稱 |
| animation-duration | 規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒婆硬。默認(rèn)是 0回季。 |
| animation-timing-function | 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"暂雹。 |
| animation-delay | 規(guī)定動畫何時開始。默認(rèn)是 0创夜。 |
| animation-iteration-count | 規(guī)定動畫被播放的次數(shù)杭跪。默認(rèn)是 1。 |
| animation-direction | 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"涧尿。 |
| animation-play-state | 規(guī)定動畫是否正在運(yùn)行或暫停系奉。默認(rèn)是 "running"。 |
| animation-fill-mode | 規(guī)定對象動畫時間之外的狀態(tài)姑廉。 |
其中animation 屬性是一個簡寫屬性缺亮，用于設(shè)置六個動畫屬性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
效果如下：
CssAnimation.gif
