极客观点
项目管理
HarmonyOS
android 6.01(微信中BUG)/[ios 也有可能出现！]
暂停旋转后，再开始旋转，角度错乱问题！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3旋转/暂停示例</title>
<style media="screen">
body{
text-align: center;
}
.ddd{
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
background-color: red;
border-radius: 100%;
margin: 3em auto;
color: #fff;
-webkit-animation: nebulaRotate 6s linear infinite;
animation: nebulaRotate 6s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.start{
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes nebulaRotate {
0% {
-webkit-transform: none;
transform: none;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes nebulaRotate {
0% {
-webkit-transform: none;
transform: none;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<p>android(微信中BUG)/[ios 也有可能出现！]</p>
<p>暂停旋转后，再开始旋转，角度错乱问题！</p>
<p><small>点击红色圆形(旋转／暂停)，查看问题</small></p>
<div class="ddd" id="kkk">CSS3旋转/暂停示例</div>
<script type="text/javascript">
var el = document.querySelector('#kkk');
el.addEventListener("click",function(){
el.classList.toggle('start');
},false);
</script>
</body>
</html>