CSSanimation延迟重复
我最近发现如何“正确地”使用CSSanimation（以前我把它们解释为不能像JavaScript那样制作复杂的序列）。 所以现在我正在学习他们。
为了达到这个效果，我试图在一个进度条状的元素上使用渐变“flare”。 类似于本机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%是完全一样的，导致animation长度的80％的“延迟”。
这是有效的，但对于我的下一个animation，我需要延迟variables（对于特定元素是常量，对于使用animation的元素是variables），而animation本身保持完全相同的长度。
有了上述的“解决scheme”，当我想要的是一个更长的延迟时，我会最终得到一个较慢的animation。
是否有可能使animation-delay适用于所有迭代，而不仅仅是第一个？
我有一个类似的问题，并使用
@-webkit-keyframes pan { 0%, 10% { -webkit-transform: translate3d( 0%, 0px, 0px); } 90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); } }
有点刺激，你必须伪造你的时间来解决任何一端的“延误”。
minitech是正确的， animation-delay指定animation开始之前的延迟，而不是迭代之间的延迟。 这个规范的编辑草稿很好地描述了这个问题，并且在这里描述了这个function的讨论，这个function暗示了这个迭代延迟function。
虽然在JS中可能有一个解决方法，但是你可以使用CSS来伪造进度条flare的迭代延迟。
通过声明flare div position:absolute和父div div overflow: hidden ，将100％关键帧状态设置为大于进度条的宽度，并使用立方贝塞尔定时函数和左偏移值，可以以“延迟”来模拟ease-in-out或linear时序。
编写一个less / scss mixin精确地计算左偏移量和时序函数来得到这个值是很有意思的，但是我现在没有时间来摆弄它。 很想看到这样的事情！
这里有一个演示我扔在一起，以显示这一点。 （我试图模仿Windows 7的进度条，稍微短了一些，但是它certificate了我在说什么）
演示： 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; }
这是你应该做的。 它应该工作，你有一个1秒的animation，然后迭代之间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; }
所以我一直在搞这么多，你可以做到这一点，而不是很哈克。 这是在animation迭代之间放置一个延迟的最简单的方法，它是1. SUPER EASY和2.只需要一点逻辑。 看看我做的这个舞蹈animation：
.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); } }
我其实来这里试图弄清楚如何延迟animation，当我意识到你只是1.延长animation的持续时间和衬衫的时间比例为每个animation。 我有他们每个持续0.5秒，2.5秒的总持续时间。 现在我们可以说我想增加一个等于总持续时间的延迟，所以2.5秒的延迟。
您的animation时间为2.5秒，延迟为2.5，因此您将持续时间更改为5秒。 但是，由于总持续时间加倍，因此您需要将animation比例减半。 检查下面的最后。 这对我来说是完美的。
@-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); } }
总共：
这些是你可能用来计算如何改变你的animation持续时间和每个部分的％的计算。
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
我宁愿写一点JavaScript，也不愿让CSS变得易于pipe理。
首先，只对数据属性更改应用CSSanimation：
.progbar[data-animation="barshine"] { animation: barshine 1s linear; }
然后添加JavaScript切换animation在一半的延迟量。
var progbar = document.querySelector('.progbar'); var on = false; setInterval(function () { progbar.setAttribute('data-animation', (on) ? 'barshine' : ''); on = !on; }, 3000);
或者，如果您不希望在隐藏标签时运行animation：
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();
这里有一小段代码显示了75％的时间，然后滑动。 这个重复模式很好地模拟了延迟：
@-webkit-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @-moz-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} }
延迟只能在无限的时候开始。 在sorting延迟不适用于无限循环。 为此你必须保持关键帧animation空白的例子：
@-webkit-keyframes barshine { 10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); } 60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);} }
它会animation10％到60％，等待完成40％以上。 所以40％来得迟。
find小提琴的例子
我在墙上左右间隔地做了一张海报。 对我来说，它的作品：
.div-animation { -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animation: bounce 2000ms ease-out infinite; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; } @-webkit-keyframes bounce { 0% { transform: rotate(0deg); } 3% { transform: rotate(1deg); } 6% { transform: rotate(2deg); } 9% { transform: rotate(3deg); } 12% { transform: rotate(2deg); } 15% { transform: rotate(1deg); } 18% { transform: rotate(0deg); } 21% { transform: rotate(-1deg); } 24% { transform: rotate(-2deg); } 27% { transform: rotate(-3deg); } 30% { transform: rotate(-2deg); } 33% { transform: rotate(-1deg); } 36% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
