シンプルなCSSキーフレームアニメーションが動作しない

私はCSSアニメーションの簡単な例を作っていますが、動作しません。誰かを助ける！シンプルなCSSキーフレームアニメーションが動作しない

<html> 
 
<head> 
 

 
<style> 
 

 
.dot{ 
 
    background: #e74c3c; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    animation: pulse 1s infinite; 
 

 
} 
 

 
@keyframes pulse{ 
 
\t 0% {box-shadow: 0 0 0 0em #c0392b;} 
 
\t 25% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 50% {box-shadow: 0 0 0 0.5em #c0392b;} 
 
\t 75% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 100% {box-shadow: 0 0 0 0.15em #c0392b;} 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 
<span class="dot"></span> 
 
</body> 
 

 
</html>

出典

2017-04-13 Deadpool

あなたのスパンにdisplay: inline-block;を追加し、あなたはそれがあなたのアニメーションを表示displayblock or inline-blockにそれを変更するとすぐに示唆したように、あなたは、

.dot{ 
    background: #e74c3c; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    font-size: 10px; 
    animation: pulse 1s infinite; 
    display: inline-block; 

}

出典

2017-04-13 06:49:38 Chiller

default display of span is inline行ってもいいです。

span{ 
display:inline;/*Default*/ 
} 

.dot{ 
........... 
........... 
........... 
display:block;/*or inline-block*/ 
}

出典

2017-04-13 06:55:03 frnt

spanので、あなたはそれを動作させるために.dotクラスにdisplay:inline-blockを追加する必要がinline elementです。以下は

作業例 -

<html> 
 
<head> 
 

 
<style> 
 

 
.dot{ 
 
    background: #e74c3c; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    animation: pulse 1s infinite; 
 
    display:inline-block; 
 

 
} 
 

 
@keyframes pulse{ 
 
\t 0% {box-shadow: 0 0 0 0em #c0392b;} 
 
\t 25% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 50% {box-shadow: 0 0 0 0.5em #c0392b;} 
 
\t 75% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 100% {box-shadow: 0 0 0 0.15em #c0392b;} 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 
<span class="dot"></span> 
 
</body> 
 

 
</html>

です

出典

2017-04-13 06:58:55

シンプルなCSSキーフレームアニメーションが動作しない

答えて

関連する問題