我怎样才能控制这种旋转？ [英] How Can I Have A Control Of This Rotate?

问题描述

＃myDIV1 
 {
 margin：auto; 
边框：1px纯黑色; 
宽度：200px; 
身高：100px; 
背景色：珊瑚; 
颜色：白色; 
动画：我的5s无限; 
  / *   Safari和Chrome：* /  
 -webkit-animation：my 5s无限; 
 position：absolute; top： 885 ; left： 0 ; 
 background-image：url（  ../ pic / gear-icon.png ）; 
 background-color：white; 
 border：0px solid white; 
宽度：96px; 
身高：96px; 
 border-radius：50％; 
} 
 @keyframes my 
 {
 100％{transform：rotate（360deg）;} 
} 
  / *   Safari和Chrome：* /  
 @ -webkit-keyframes my 
 {
 100％{ - webkit-transform：rotate（360deg）;} 
} 

此代码旋转我的图片，当一轮完成停止秒时再次执行此工作

它的作品是真的，但我想不要停一秒钟

id应该做什么？

解决方案

这个是一个众所周知的功能。



以下是讨论 [ ^ ]关于解决方法，包括示例 [ ^ ]。

#myDIV1
{
margin:auto;
border:1px solid black;
width:200px;
height:100px;
background-color:coral;
color:white;
animation:my 5s infinite;
/*Safari and Chrome:*/
-webkit-animation:my 5s infinite;
position:absolute;top:885;left:0;
background-image:url("../pic/gear-icon.png");
background-color:white;
border:0px solid white;
width:96px;
height:96px;
border-radius:50%;
}
@keyframes my
{
100% {transform:rotate(360deg);}
}
/*Safari and Chrome:*/
@-webkit-keyframes my
{
100% {-webkit-transform:rotate(360deg);}
}

this code rotate my picture and when a round finished stop for on second and again do this job
its works true but i want to dont stop for 1 second
what should id do?

解决方案

This is a known "feature".

Here is a discussion[^] about workarounds, including an example[^].

这篇关于我怎样才能控制这种旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！