gpt4 book ai didi

具有不同延迟的CSS多个动画

转载 作者:行者123 更新时间:2023-12-05 03:39:48 26 4
gpt4 key购买 nike

<分区>

根据 MDN

p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}

相当于

p {
animation: 3s infinite alternate slidein;
}

在同一个元素上应用多个动画可以通过以下方式实现:

<div></div>
@keyframes animScale{
from{
transform: scale(0.2, 0.2);
}
to{
transform: scale(1, 1);
}
}

@keyframes animOpacity{
from{
opacity: 0;
}
to{
opacity: 1;
}
}

div{
width: 200px;
height: 200px;
background: red;
animation: animScale 2000ms ease-in-out infinite,
animOpacity 2000ms ease-in-out infinite;
}

有没有一种方法可以将 animation-delay 写入属性 animation 中,以便我可以有两个从不同时间开始的动画?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com