写个简单css动画，transition 和animate
先写个普通的不动的球
.ball{ width: 100px; height: 100px; border-radius: 100px; background-color: #f69; }
然后加上一个神奇的属性transform，可以让小球偏移原来的位置（transform有很多玩法，这里展示移动）
.ball{ /* ... */ transform: translate(200px,0); }
transition：动作触发，一次性动画
让其动起来
.ball{ /* ... */ transform: translate(200px,0); transition: 1s linear; } .ball:hover{ /* ... */ transform: translate(0,0); }
但transition的毛病就是，必须某种动作触发（hover active巴拉巴拉），然后一次性动画。
需要复杂些的动画就需要animation
animation:随时触发，可控性很强
上面的换成animation：
.ball { width: 100px; height: 100px; border-radius: 100px; background-color: #f69; animation: move 2s linear; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(200px, 0); } }
网络异常，图片无法展示
|
球一开始就运动，但是运动完之后，秒回动画前的位置，也就是很突然的感觉，想改变的话，两种方式：
- 第一种常想到的方式：设置动画的100%处就是动画前的状态，这样结束时就和动画前的状态一致了。
@keyframes move { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(200px, 0); } }
- 第二种：设置动画填充模式
forwards，动画结束之后，就让小球在100%的状态
/* backwards是有延迟时让小球在动画开始前，在0%的状态。both是动画开始前和结束后一个0%,一个100%的状态 */ .box{animation: move 2s linear forwards;}
无限播放：基本结合alternative
实现一直在动的话
网络异常，图片无法展示
|
.ball { width: 100px; height: 100px; border-radius: 100px; background-color: #f69; /* alternate很关键，正向和反向交替进行，先从0%->100%，然后100%->0%，这样才有一直动的效果 */ animation: move 2s linear alternate infinite; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(200px, 0); } }
