CSS 无限旋转动画

Posted 2023-05-08

技术标签:

【中文标题】CSS 无限旋转动画【英文标题】：CSS endless rotation animation 【发布时间】：2022-01-05 06:33:59 【问题描述】：

我想通过 CSS 旋转我的加载图标。

我有一个图标和以下代码：

<style>
#test 
    width: 32px;
    height: 32px;
    background: url('refresh.png');


.rotating 
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

</style>

<div id='test' class='rotating'></div>

但它不起作用。如何使用 CSS 旋转图标？

【问题讨论】：

已建立的解决方案 — jsfiddle.net/LwwfG 请回答，以结束问题。您可以添加自己的答案。在其中包含 jsFiddle 演示中的代码。 【参考方案1】：

工作不错：

#test 
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');


@-webkit-keyframes rotating 
    from
        -webkit-transform: rotate(0deg);
    
    to
        -webkit-transform: rotate(360deg);
    


.rotating 
    -webkit-animation: rotating 2s linear infinite;

&lt;div id='test' class='rotating'&gt;&lt;/div&gt;

【讨论】：

有没有可用的跨浏览器 css 解决方案？【参考方案2】：

@-webkit-keyframes rotating /* Safari and Chrome */ 
  from 
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  
  to 
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  

@keyframes rotating 
  from 
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  
  to 
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  

.rotating 
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

【讨论】：

一个问题，-moz- 和 -ms- 在 -webkit-keyframes 下是否需要前缀？因为只有 webkit 会读取 -webkit-keyframes 我相信删除它们是安全的。我是否正确理解这在理论上并不完美，因为非供应商前缀属性应始终位于最后，以免覆盖符合标准的行为？见：css-tricks.com/ordering-css3-properties 酷。编辑前正在检查。不是 100% 确定。 @Ricky - 提示：当您已经与作者讨论过编辑（如上所述）时，在“编辑 cmets”中提及这一点并不是一个坏主意。所以编辑不会被拒绝为“彻底的改变”;-) 如果您使用 PostCSS，请考虑在仅使用 transform 时使用 autoprefixer 来处理所有跨浏览器问题。【参考方案3】：

CSS 中的无限旋转动画

/* ENDLESS ROTATE */
.rotate
  animation: rotate 1.5s linear infinite; 

@keyframes rotate
  to transform: rotate(360deg); 



/* SPINNER JUST FOR DEMO */
.spinner
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;

&lt;span class="spinner rotate"&gt;&lt;/span&gt;

MDN - Web CSS Animation

【讨论】：

你会因为将微调器更新为弹性框而获得我的布朗尼积分......只需将容器设置为显示弹性并放置内容中心，并基于子元素进行弹性调整。 @RayFoss 首先是 flexbox，它应该是 inline-flex。此外，没有必要为了解释无限动画而弯曲任何东西；）还有，孩子？你说的是哪个孩子？您是否在想要的答案下发表评论？【参考方案4】：

<style>
div
  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    

@-webkit-keyframes spin 
    0%  -webkit-transform: rotate(0deg);
    100% -webkit-transform: rotate(360deg);   


</style>
</head>

<body>
<div><img src="1.png"  /></div>
</body>

【讨论】：

【参考方案5】：

没有任何前缀，例如最简单的：

.loading-spinner 
  animation: rotate 1.5s linear infinite;


@keyframes rotate 
  to 
    transform: rotate(360deg);

【讨论】：

【参考方案6】：

适用于所有现代浏览器

.rotate
 animation: loading 3s linear infinite;
 @keyframes loading 
  0%  
    transform: rotate(0); 
  
  100%  
    transform: rotate(360deg);

【讨论】：

【参考方案7】：

轮换添加类 .active

  .myClassName.active 
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              



@-moz-keyframes spin 
       100% 
        -moz-transform: rotate(360deg);
      
     
     @-webkit-keyframes spin 
      100% 
         -webkit-transform: rotate(360deg);
       
     
     @keyframes spin 
       100% 
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);

【讨论】：

【参考方案8】：

@keyframes rotate 
    100% 
        transform: rotate(1turn);
    


div
   animation: rotate 4s linear infinite;

【讨论】：

嗨，欢迎来到 Stack Overflow！当你回答一个问题时，你应该包括某种解释，比如作者做错了什么以及你做了什么来解决它。我告诉你这个是因为你的答案被标记为低质量，目前正在审查中。您可以点击“编辑”按钮edit您的答案。【参考方案9】：

最简单的方法是通过添加“fa-spin”类来使用字体真棒图标。例如：

<i class="fas fa-spinner fa-3x fa-spin"></i>

您可以节省一些代码行，但当然您仅限于 font awesome 的图标。我总是用它来加载微调器

这里有来自 font awesome 的文档： https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

【讨论】：

【参考方案10】：

只需试试这个。工作正常

@-webkit-keyframes loading 
    from 
        -webkit-transform: rotate(0deg);
    
    to 
        -webkit-transform: rotate(360deg);
    

@-moz-keyframes loading 
    from 
        -moz-transform: rotate(0deg);
    
    to 
        -moz-transform: rotate(360deg);
    


#loading 
    width: 16px;
    height: 16px;
    -webkit-animation: loading 2s linear infinite;
    -moz-animation: loading 2s linear infinite;

<div class="loading-test">
    <svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>

【讨论】：

以上是关于CSS 无限旋转动画的主要内容，如果未能解决你的问题，请参考以下文章

css3 实现动画效果，怎样使他无限循环动下去？