Question

我正在制作CSS动画的简单示例，但它不会运行。 Pl帮助某人！

<html>
<head>

<style>

.dot{
    background: #e74c3c;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    animation: pulse 1s infinite;

}

@keyframes  pulse{
	0% {box-shadow: 0 0 0 0em #c0392b;}
	25% {box-shadow: 0 0 0 0.25em #c0392b;}
	50% {box-shadow: 0 0 0 0.5em #c0392b;}
	75% {box-shadow: 0 0 0 0.25em #c0392b;}
	100% {box-shadow: 0 0 0 0.15em #c0392b;}
}
</style>

</head>

<body>
<span class="dot"></span>
</body>

</html>

Answer 1

将display: inline-block;添加到您的范围内，您就可以了

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

}

Answer 2

default display of span is inline，根据建议，只要您将其display更改为block or inline-block，就会显示您的动画。

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

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

Answer 3

span是inline element，因此您必须将display:inline-block添加到.dot类才能使其正常运行。

以下是工作示例 -

＆＃13;

<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{
	0% {box-shadow: 0 0 0 0em #c0392b;}
	25% {box-shadow: 0 0 0 0.25em #c0392b;}
	50% {box-shadow: 0 0 0 0.5em #c0392b;}
	75% {box-shadow: 0 0 0 0.25em #c0392b;}
	100% {box-shadow: 0 0 0 0.15em #c0392b;}
}
</style>

</head>

<body>
<span class="dot"></span>
</body>

</html>

＆＃13;

简单的CSS关键帧动画无效

3 个答案: