学习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;
}
/* 定义关键帧 */
@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 | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
其中animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
效果如下：
CssAnimation.gif
