css3钟摆效果
程序员文章站
2022-03-05 09:29:05
...
css3钟摆效果
.pendulum-styl {
-webkit-animation: run 1s ease-in-out alternate infinite;
-moz-animation: run 1s ease-in-out alternate infinite;
animation: run 1s ease-in-out alternate infinite;
@keyframes run {
0% {
-webkit-transform: rotate(10deg);
-webkit-transform-origin: top center;
-moz-transform: rotate(10deg);
-moz-transform-origin: top center;
transform: rotate(10deg);
transform-origin: top center;
}
100% {
-webkit-transform: rotate(-10deg);
-webkit-transform-origin: top center;
-moz-transform: rotate(-10deg);
-moz-transform-origin: top center;
transform: rotate(-10deg);
transform-origin: top center;
}
}
}
下一篇: 第十二章:Trait