간단한 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는 inline element 그래서 당신이 그것을 작동하게하는 .dot 클래스에 display:inline-block를 추가해야합니다. 다음은

는 작업 예 -

<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 키 프레임 애니메이션이 작동하지 않습니다.

답변

관련 문제