我有一个电话图标在我的网站上，这个图标不断地振动，这非常干扰网站的用户。 我想鞍形图标的振动延迟2秒。 我试着这样做-动画-延迟:1s。 这帮不了我。 告诉我，我怎样才能延迟2秒的动画，但是动画循环会保留什么？ 谢谢。
null
.call_me_pls_from_mobile {
animation: phone .1s ease-in-out infinite;
display: flex;
width: 100%;
}
@keyframes phone {
0%, 100% {
transform: translateX(-21deg);
}
50% {
transform: rotate(21deg);
}
}<a class="call_me_pls_from_mobile" href="">
<img src="https://c7.hotpng.com/preview/578/746/452/5bbc65ef3eb9c-thumbnail.jpg" alt="">
</a>null
您可以通过在ease-in-out和infinity之间添加2s来分隔初始延迟。
如果要在有限的时间内运行动画，请使用animation-iteration-count属性。 您的延迟是。1s，如果您迭代20次，动画将持续2秒。
null
.call_me_pls_from_mobile {
animation: phone .1s ease-in-out 2s infinite;
animation-iteration-count: 20;
display: flex;
width: 100%;
}
@keyframes phone {
0%, 100% {
transform: translateX(-21deg);
}
50% {
transform: rotate(21deg);
}
}<a class="call_me_pls_from_mobile" href="">
<img src="https://c7.hotpng.com/preview/578/746/452/5bbc65ef3eb9c-thumbnail.jpg" alt="">
</a>
如果你想让动画无限重复，重复之间有延迟，你需要更多的关键帧。
这将近似于一秒的动画和两秒的暂停:
null
.call_me_pls_from_mobile {
animation: phone 3s ease-in-out infinite;
display: flex;
width: 100%;
}
@keyframes phone {
0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32% {
transform: rotate(-21deg);
}
2%, 6%, 10%, 14%, 18%, 22%, 26%, 30% {
transform: rotate(21deg);
}
33%, 100% {
transform: rotate(0deg);
}
}<a class="call_me_pls_from_mobile" href="">
<img src="https://c7.hotpng.com/preview/578/746/452/5bbc65ef3eb9c-thumbnail.jpg" alt="">
</a>
它很容易在JavaScript的帮助下实现。
若要再次振铃，请执行ring()
null
function ring(){
let img = document.getElementById("img");
setTimeout(function(){
img.classList.add("call_me_pls_from_mobile");
},2000)
}
ring();.call_me_pls_from_mobile {
animation: phone .1s ease-in-out infinite;
display: flex;
width: 100%;
}
@keyframes phone {
0%, 100% {
transform: translateX(-21deg);
}
50% {
transform: rotate(21deg);
}
}<a id="img" href="">
<img src="https://c7.hotpng.com/preview/578/746/452/5bbc65ef3eb9c-thumbnail.jpg" alt="">
</a>