animation, transition动画效果区别（transform, translate）

animation:
配合@keyframe
两者的name 要对应

.box{ height:100px;width:100px; border:15px solid black; animation: changebox 10s ease-in-out 3 alternate paused; } .box:hover{ animation-play-state: running; } @keyframe changebox { 10% { background: red;} 20% { width: 200px} 100% { background: green} }

transition: 单独特定的效果
transform 是 transition一个属性值
translate是transform的一个属性值

#box2{
 3             height: 100px;
 4             width: 100px;
 5             background: blue;
 6         }
 7         #box2:hover{
 8             transform: rotate(180deg) scale(.5, .5);
 9             background: red;
10             transition: background 2s ease, transform 2s ease-in 1s;}