<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes turn3 {
100% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
25% {
-webkit-transform: rotate(270deg);
}
0% {
-webkit-transform: rotate(360deg);
}
}
/*
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
*/
.needle {
width: 200px;
height: 200px;
background: #090;
margin: 300px auto;
animation: turn3 2s linear infinite;
}
</style>
</head>
<body>
<div class="needle"></div>
</body>
</html>