動畫在此代碼中無法正常工作

我是新來的使用CSS的動畫。我開發的代碼使用CSS動畫，旋轉圖標，但它不工作，我不能確定什麼是error.here是我的代碼：動畫在此代碼中無法正常工作

.rotate { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="star.css"> 
 
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/style.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" /> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     <i class="rotate fa fa-anchor"></i> 
 
     <img class="rotate" src="https://i.stack.imgur.com/NiTEy.jpg"> 
 
    </body> 
 
</html>

來源

2016-08-23 Dream Hunter

使用代碼片段編輯器創建一個顯示問題 – mplungjan

哪裏的旋轉動畫關鍵幀的例子嗎？ –

.spinner { 
 
    -webkit-animation:spin 0.5s linear infinite; 
 
    -moz-animation:spin 0.5s linear infinite; 
 
    animation:spin 0.5s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
-webkit-keyframes spin { 
 
    0% { 
 
    transform: rotate(0); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<img class="spinner" src="http://placehold.it/200x200">

來源

2016-08-23 08:03:42

你做到了....這就是我真正需要的。 –

試試這個

<i class=" fa fa-anchor fa-spin"></i>

.rotate { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
}

<script src="https://use.fontawesome.com/79a4552de1.js"></script> 
 
     <i class=" fa fa-anchor fa-spin"></i> 
 
     <img class="fa-spin" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png" style="width:100px;">

來源

2016-08-23 07:26:30

刪除你旋轉類 –

你的答案是這個問題的一個很好的解決方案。但是當我想調整動畫參數時，我該如何調整它們？ –

您是否想要實現像這樣的https://jsfiddle.net/vinaypiro/kvuqjv5z/ –

試試這個。

CSS

.element { 
    display: inline-block; 
    background-color: #0074d9; 
    height: 100px; 
    width: 100px; 
    font-size: 1px; 
    padding: 1px; 
    color: white; 
    margin-right: 5px; 
    margin-left: 5px; 
    animation: roll 3s infinite; 
    transform: rotate(30deg); 
    opacity: .7; 
} 

@keyframes roll { 
    0% { 
    transform: rotate(0); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 


body, html { 
    height: 100%; 
} 


body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
</style>

HTML：

<div class="element"> 
</div> 
<div class="element"> 
</div> 
<div class="element"> 
</div>

Run Code

來源

2016-08-23 07:40:42 Anju

你給我真正的東西。這可能會幫助我。 –

.rotate { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
} 
 
@keyframes spin{ 
 
    0%{ 
 
    transform:rotate(0deg); 
 
    } 
 
    50%{ 
 
    transform:rotate(90deg); 
 
    } 
 
    100%{ 
 
    transform:rotate(180deg); 
 
    } 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="star.css"> 
 
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/style.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" /> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     <i class="rotate fa fa-anchor"></i> 
 
     <img class="rotate" src="https://i.stack.imgur.com/NiTEy.jpg"> 
 
    </body> 
 
</html>

來源

2017-01-13 10:38:14

動畫在此代碼中無法正常工作

回答

相關問題