CSS只加载动画无法按预期方式工作

我尝试过使用box-shadow的动画。如果你注意到红色方块 - 阴影重复两次来回。我怀疑这是否由于动画方向：备用属性或由于错误的盒子阴影属性而发生。你能否纠正我自己在做什么错事。希望你了解我的查询。CSS只加载动画无法按预期方式工作

.loader{ 
 
    height:20px; 
 
    width:20px; 
 
    background:#0388db; 
 
    border-radius:50%; 
 
    margin:50px; 
 
    box-sizing:border-box; 
 
    animation:boxShadow 2s linear infinite alternate; 
 
    box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
    0%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
    25%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
    } 
 
    50%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 

 
    75%{ 
 
     box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
    } 
 
    100%{ 
 
    box-shadow:0 0 3px #0388db; 
 
    } 
 
}

<div class="loader"> 
 

 
</div>

请参考工作拨弄HERE

来源

2017-08-08 Santhosh Kumar

是这你在找什么？ https://jsfiddle.net/DChandraShekhar/nao9apwt/1/ –

@Santhosh Kumar https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction.check this url – Dhaarani

.loader{ 
 
    height:20px; 
 
    width:20px; 
 
    background:#0388db; 
 
    border-radius:50%; 
 
    margin:50px; 
 
    box-sizing:border-box; 
 
    animation:boxShadow 2s linear infinite forwards; 
 
    box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
    0%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
    25%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
    } 
 
    50%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red, 24px 0 0px -2px red; 
 
    } 
 

 
    75%{ 
 
     box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
    } 
 
    100%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
}

<div class="loader"> 
 

 
</div>

使用animation-timing-function作为forwards，

希望这有助于..

来源

2017-08-08 05:11:03

动画方向：备选属性不适合于这个例子。去掉它。

.loader{ 
 
    height:20px; 
 
    width:20px; 
 
    background:#0388db; 
 
    border-radius:50%; 
 
    margin:50px; 
 
    box-sizing:border-box; 
 
    animation:boxShadow 2s linear infinite; 
 
    box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
    0%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
    25%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
    } 
 
    50%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 

 
    75%{ 
 
     box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
    } 
 
    100%{ 
 
    box-shadow:0 0 3px #0388db; 
 
    } 
 
}

<div class="loader"> 
 

 
</div>

来源

2017-08-08 05:07:48 Dhaarani

你应该的0％和25％的变化的代码线

在0％的红色周期应该是-48和48像素和在25％应为-24和24 PX

.loader{ 
 
\t height:20px; 
 
\t width:20px; 
 
\t background:#0388db; 
 
\t border-radius:50%; 
 
\t margin:50px; 
 
\t box-sizing:border-box; 
 
\t animation:boxShadow 2s linear infinite alternate; 
 
\t box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
\t 0%{ 
 
\t \t box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
\t } 
 
\t 25%{ 
 
\t \t box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
\t } 
 
\t 50%{ 
 
\t \t box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
\t } 
 
\t 75%{ 
 
\t \t box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
\t } 
 
\t 100%{ 
 
\t \t box-shadow:0 0 3px #0388db; 
 
\t } 
 
}

\t \t <div class="loader"> 
 
\t \t </div>

来源

2017-08-08 05:14:26 Alireza

CSS只加载动画无法按预期方式工作

回答

相关问题