我最近发现了如何“正确”使用CSS动画(之前我认为它们不能像JavaScript那样制作复杂的序列)。所以现在我正在学习它们。
为了达到这个效果,我试着让一个渐变的“光晕”扫过一个类似进度条的元素。类似于本机Windows Vista/7进度条上的效果。
@keyframes barshine {
from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
animation: barshine 1s 4s linear infinite;
}
正如你所看到的,我试图有4秒的延迟,然后在1秒内光芒扫过,重复。
然而,animation-delay
似乎只适用于第一次迭代,在第一次迭代之后,光芒就会不断重复地扫过。
我按如下方式“解决”了这个问题:
@keyframes expbarshine {
from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
animation: barshine 5s linear infinite;
}
from
和80%
是完全相同的,导致动画长度的80%的“延迟”。
这是可行的,但是对于我的下一个动画,我需要延迟是可变的(对于特定的元素是恒定的,但在使用动画的元素中是可变的),而动画本身保持完全相同的长度。
使用上面的“解决方案”,当我想要更长的延迟时,我会得到一个更慢的动画。
有没有可能让animation-delay
应用于所有迭代,而不仅仅是第一次迭代?
发布于 2013-07-03 19:54:01
我也有类似的问题,于是我用
@-webkit-keyframes pan {
0%, 10% { -webkit-transform: translate3d( 0%, 0px, 0px); }
90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); }
}
有些恼人的是,你必须伪造你的持续时间来解释两端的“延迟”。
发布于 2014-01-15 15:09:46
这就是你应该做的。它的工作原理是,你有一个1秒的动画,然后在迭代之间有4秒的延迟:
@keyframes barshine {
0% {
background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);
}
20% {
background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);
}
}
.progbar {
animation: barshine 5s 0s linear infinite;
}
所以我已经花了很多时间来处理这个问题,你可以不用太麻烦就能做到。这是在动画迭代之间添加延迟的最简单方法,这是1.超级简单和2.只需要一点逻辑。看看我做的这个舞蹈动画:
.dance{
animation-name: dance;
-webkit-animation-name: dance;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
@keyframes dance {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
50% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes dance {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
40% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
60% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
95% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
}
当我意识到你只需要1.延长动画的持续时间和每个动画的时间比例时,我实际上是想找出如何在动画中加入延迟的方法。在此之前,我让它们每个都持续.5秒,总持续时间为2.5秒。现在假设我想增加一个等于总持续时间的延迟,所以是2.5秒的延迟。
动画时间为2.5秒,延迟为2.5秒,因此将持续时间更改为5秒。但是,由于您将总持续时间增加了一倍,因此您需要将动画比例减半。检查下面的期末考试。这对我来说非常有效。
@-webkit-keyframes dance {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
20% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
30% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
50% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
总结一下:
这些是你可能用来计算如何改变你的动画的持续时间和每个部分的百分比的计算。
desired_duration =x
desired_duration = animation_part_duration1 + animation_part_duration2 + ...(以此类推)
desired_delay =y
总持续时间=x+y
animation_part_duration1_actual = animation_part_duration1 * desired_duration / total_duration
发布于 2020-05-03 03:36:39
另一种在动画之间实现暂停的方法是应用第二个动画,该动画在您想要的延迟量内隐藏元素。这样做的好处是,您可以像往常一样使用CSS轻松功能。
.star {
animation: shooting-star 1000ms ease-in-out infinite,
delay-animation 2000ms linear infinite;
}
@keyframes shooting-star {
0% {
transform: translate(0, 0) rotate(45deg);
}
100% {
transform: translate(300px, 300px) rotate(45deg);
}
}
@keyframes delay-animation {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
仅当希望延迟是动画持续时间的倍数时,此选项才有效。我用这个让流星雨看起来更随机:https://codepen.io/ericdjohnson/pen/GRpOgVO
https://stackoverflow.com/questions/13887889
复制相似问题