minitech는 animation-delay애니메이션이 시작되기 전 지연 을 지정하고 반복 사이의 지연 을 지정 하지 않습니다 . 사양의 편집자 초안은 잘 설명하고 설명하고이 기능에 대한 논의가 있었다 여기 이 반복 지연 기능을 제안.
JS에 해결 방법이있을 수 있지만 CSS 만 사용하여 진행률 표시 줄 플레어에 대해이 반복 지연을 가짜로 만들 수 있습니다.
flare div position:absolute및 부모 div 를 선언하고 overflow: hidden진행률 표시 줄의 너비보다 큰 100 % 키 프레임 상태를 설정하고 cubic-bezier 타이밍 함수 와 왼쪽 오프셋 값을 가지고 놀 면서 ease-in-out또는 linear타이밍을 다음과 같이 에뮬레이션 할 수 있습니다. 지연".
이 정확한 값을 얻기 위해 왼쪽 오프셋과 타이밍 함수를 정확히 계산하기 위해 less / scss 믹스 인을 작성하는 것이 흥미로울 것입니다. 그래도 그런 걸보고 싶어요!
이것을 보여주기 위해 함께 던진 데모가 있습니다. (나는 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
background:
background: -moz-linear-gradient(top,
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
background: -webkit-linear-gradient(top,
background: -o-linear-gradient(top,
background: -ms-linear-gradient(top,
background: linear-gradient(to bottom,
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
border-radius: 3px;
}
animation-delay애니메이션이 시작되기 전의 지연이며 이와 같은 다른 속성은 없습니다. :) 당신은 아마 오히려 사용하지 거라고 자바 스크립트와 나쁜 해결 방법은있다