那些遇到过的问题

CSS动画延迟重复

Nie*_*sol 67 css css-animations

我最近发现了如何"正确"使用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;
}
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,我试图延迟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;
}
Run Code Online (Sandbox Code Playgroud)

from并且80%完全相同,导致动画长度的80%的"延迟".

这是有效的,但对于我的下一个动画,我需要延迟变量(特定元素的常量,但使用动画的元素之间的变量),而动画本身保持完全相同的长度.

使用上面的"解决方案",当我想要的是更长的延迟时,我最终会得到一个更慢的动画.

是否有可能animation-delay适用于所有迭代,而不仅仅是第一次？

Seb*_*mas 51

我有一个类似的问题并使用 

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}
Run Code Online (Sandbox Code Playgroud)

有点恼火,你必须伪造你的持续时间来解释两端的"延迟".

tim*_*tim 17

minitech是正确的,它animation-delay指定动画开始之前的延迟,而不是迭代之间的延迟. 该规范的编辑草稿对此进行了很好的描述,并且讨论了您在此处描述的这一功能,该功能提示了此迭代延迟功能.

虽然JS中可能存在一种解决方法,但您可以仅使用CSS伪造进度条光晕的迭代延迟.

通过声明flare div position:absolute和父div overflow: hidden,将100%关键帧状态设置为大于进度条的宽度,并使用cubic-bezier计时函数和左偏移值进行游戏,您可以模拟ease-in-out或linear使用延迟".

写一个less/scss mixin来计算精确的左偏移量和定时函数来获得这个确实很有意思,但我现在还没有时间来摆弄它.很想看到类似的东西!

这是一个演示,我把它拼凑在一起展示这个.(我试图模仿Windows 7进度条并且有点短,但它演示了我在说什么)

演示:http: //codepen.io/timothyasp/full/HlzGu

<!-- HTML -->
<div class="bar">
   <div class="progress">
      <div class="flare"></div>
   </div>
</div>


/* CSS */

@keyframes progress {
  from {
    width: 0px;
  }
  to {
    width: 600px;
  }
}

@keyframes barshine {
  0% {
    left: -100px;
  }

  100% {
    left: 1000px;
  }
}
.flare {
  animation-name: barshine;
  animation-duration: 3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
  animation-iteration-count: infinite;
  left: 0;
  top: 0;
  height: 40px;
  width: 100px;
  position: absolute;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  z-index: 10;
}
.progress {
  animation-name: progress;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
  position:relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  border-right: 1px solid #0f9116;
  background: #caf7ce; /* Old browsers */
  background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */
  background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caf7ce', endColorstr='#2ab22a',GradientType=0 ); /* IE6-9 */
}

.progress:after {
  content: "";
  width: 100%;
  height: 29px;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 3;
  background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00caf7ce', endColorstr='#2ab22a',GradientType=1 ); /* IE6-9 */
}

.bar {
  margin-top: 30px;
  height: 40px;
  width: 600px;
  position: relative;
  border: 1px solid #777;
  border-radius: 3px;
}
Run Code Online (Sandbox Code Playgroud)

  • 典型的CSS.他们提供CSS动画,所以它不是在Javascript中完成的,并且样式都在一个地方,但是如果你想做除了基础之外的任何事情,那么你必须实现一个迷宫的黑客.为什么他们不只是实现让开发人员更容易的东西？ (40认同)

Tal*_*ree 8

这是你应该做的.它应该工作在你有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;
}
Run Code Online (Sandbox Code Playgroud)

所以我一直在搞乱这个问题,你可以做到这一点,而不是非常hacky.这是在动画迭代之间设置延迟的最简单方法,即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);
  }
}
Run Code Online (Sandbox Code Playgroud)

我实际上来到这里试图弄清楚如何延迟动画,当我意识到你只是1.延长动画的持续时间和衬衫每个动画的时间比例.Beore我让他们每人持续0.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);
  }
}
Run Code Online (Sandbox Code Playgroud)

总共:

这些是您可能用来计算如何更改动画持续时间和每个部分的百分比的计算.

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

Eri*_*son 6

在动画之间实现暂停的另一种方法是应用第二个动画来隐藏元素以获得所需的延迟量。这样做的好处是允许您像平常一样使用 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;
  }
}
Run Code Online (Sandbox Code Playgroud)

这仅在您希望延迟是动画持续时间的倍数时才有效。我用这个让流星雨看起来更随机：https : //codepen.io/ericdjohnson/pen/GRpOgVO

cut*_*uth 5

我宁愿写一些JavaScript,也不愿使CSS不易管理.

首先,仅对数据属性更改应用CSS动画:

.progbar[data-animation="barshine"] {
    animation: barshine 1s linear;
}
Run Code Online (Sandbox Code Playgroud)

然后添加javascript以延迟量的一半切换动画.

var progbar = document.querySelector('.progbar');
var on = false;

setInterval(function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
}, 3000);
Run Code Online (Sandbox Code Playgroud)

或者,如果您不希望隐藏选项卡时运行动画:

var progbar = document.querySelector('.progbar');
var on = false;

var update = function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
    setTimer();
};

var setTimer = function () {
    setTimeout(function () {
        requestAnimationFrame(update);
    }, 3000);
};

setTimer();
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

95389 次

最近记录：

6 年，3 月 前
相关归档
如何在排版中计算CSS字母间距与"跟踪"？ 72
CSS中的类名是否有最大长度？ 46
CSS自定义下拉选项适用于所有浏览器IE7 + FF Webkit 38
在Android上设置默认字体 30
如何在动画后保留样式？ 29
防止子元素在flexbox中溢出其父元素 26
如何使Internet Explorer 8支持第n个child()CSS元素？ 24
如何在语义UI按钮中切换内容？ 22
如何将javascript设置样式属性返回到CSS默认值 17
如何模仿断言:断言; 适用于IE9,IE11和Firefox 16
难疑归档
什么是正确的JSON内容类型？ 9962
如何格式化JavaScript日期 1945
数据绑定如何在AngularJS中运行？ 1924
Python join:为什么是string.join(list)而不是list.join(string)？ 1669
Make .gitignore会忽略除少数文件之外的所有内容 1531
是否有快速Git命令来查看旧版本的文件？ 1438
在JavaScript中停止setInterval调用 1332
用于更新和删除的HTTP状态代码？ 1264
JavaScript中是否有常量？ 1118
让Chrome接受自签名的localhost证书 1080