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;}