このコードではアニメーションが正しく機能していません

私はcssを使用しているアニメーションを初めて使用しています。このコードではアニメーションが正しく機能していません

.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

あなたはそれをやった....これは私が本当に必要なものです。 –

この

を試してみてください：何error.hereであることは私のコードである私は、CSSアニメーションを使用して、アイコンを回転させるためのコードを開発していますが、それは動作していないと私は判断することはできません

<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

このコードではアニメーションが正しく機能していません

答えて

関連する問題