在使用css动画时，docent对我的div有任何影响

Question

我尝试使用动画加载程序，但无法旋转，因为关键帧不工作

我{高度：2em；宽度：2em；enter code here边界半径：100%；背景：#fff；显示：块；余量：10em自动；位置：绝对；左：50%；动画：旋转2轻松无限；}i： 之前，i： 之后{内容："；显示：块；位置：绝对；height:继承；width：继承；背景：继承；边界半径：inherit；动画：旋转2轻松无限；-webkit动画：spin 2s轻松无限；-moz动画：spin 2s轻松无限；}

i:before {
left: -2.3em;
}
i:after {
left: 2.3em;
}
@-moz-keyframes spin {
0% {
top: 0;
-moz-transform: rotate(0deg);
}
50% {
top: -4em;
-moz-transform: rotate(-180deg);
}
100% {
top: 0;
-moz-transform: rotate(-360deg);
}
}
@-webkit-keyframes spin {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
50% {
top: -4em;
-webkit-transform: rotate(-180deg);
}
100% {
top: 0;
-webkit-transform: rotate(-360deg);
}
}
@keyframes spin {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: -4em;
transform: rotate(-180deg);
}
100% {
top: 0;
transform: rotate(-360deg);
}
}

Answer 1

我认为你需要添加一个"quot；在"；i〃；，如果"；i〃；你的div类名是吗

→CodePen示例与您的代码工作

-HTML

<div class="i">ANIMATION</div>

-CSS

.i { 
height: 2em;
width: 2em;
enter code here border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: spin 2s ease infinite; 
}
.i:before, i:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: spin 2s ease infinite;
-webkit-animation: spin 2s ease infinite;
-moz-animation: spin 2s ease infinite; 
}
.i:before {
left: -2.3em;
}
.i:after {
left: 2.3em;
}
@-moz-keyframes spin {
0% {
top: 0;
-moz-transform: rotate(0deg);
}
50% {
top: -4em;
-moz-transform: rotate(-180deg);
}
100% {
top: 0;
-moz-transform: rotate(-360deg);
}
}
@-webkit-keyframes spin {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
50% {
top: -4em;
-webkit-transform: rotate(-180deg);
}
100% {
top: 0;
-webkit-transform: rotate(-360deg);
}
}
@keyframes spin {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: -4em;
transform: rotate(-180deg);
}
100% {
top: 0;
transform: rotate(-360deg);
}
}

问候！

Answer 2

Spin类导致了这个问题，所以我更改了类名。现在工作得很好。

.loader {
height: 10px;
width: 10px;
border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: example 2s ease infinite;
margin-top: 25%;
}
.loader:before,
.loader:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: example 2s ease infinite;
}
.loader:before {
left: -1.2em;
}
.loader:after {
left: 1.2em;
}
@keyframes example {
0% {
transform: rotate(0deg);
top: 0;
}
50% {
transform: rotate(-180deg);
top: -2em;
}
100% {
transform: rotate(-360deg);
top: 0;
}
}