动画，在css中可以通过transition、animation来完成。
比如我要实现一个按钮在渲染后500ms，完成一个旋转90°的动画，动画持续时长为2s。
1.使用transition完成
`
Button {
width: 100px;
height: 30px;
margin-left: 30px;
color: #333;
vertical-align: middle;
text-align: center;
border: none;
outline: none;
transform-origin: 0 0;
transform: rotate(0deg);
}
.rotate180-transition {
transition: transform 2s ease-out 500ms;
}
Button:hover {
transform: rotate(90deg);
}
`
2.使用animation实现
`
.rotate180-animation {
animation: my-animation 2s ease-out 500ms 2;
}
@keyframes my-animation{
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(10deg);
}
20% {
transform: rotate(20deg);
}
30% {
transform: rotate(30deg);
}
40% {
transform: rotate(40deg);
}
50% {
transform: rotate(50deg);
}
60% {
transform: rotate(60deg);
}
70% {
transform: rotate(70deg);
}
80% {
transform: rotate(80deg);
}
90% {
transform: rotate(90deg);
}
}
`
如果要实现无限动画只要修改animation的循环次数为infinite就可以了
