css动画无限循环转圈,css实现无限循环

动画，在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就可以了