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只加載動畫無法按預期方式工作

回答

相關問題