Tạm dừng trong hoạt ảnh CSS3 vô hạn

Question

Tôi cố gắng tạo hoạt ảnh chạy 3 giây một lần mà không cần JavaScript. Thời lượng hoạt ảnh của tôi là 1 giây.

Tôi chỉ có thể đợi 3 giây sau lần xuất hiện đầu tiên sau đó là vòng lặp hoạt ảnh 1 giây.

Mã của tôi cho đến nay: https://jsfiddle.net/belut/aojp8ozn/32/

.face.back { 
    -webkit-animation: BackRotate 1s linear infinite; 
    -webkit-animation-delay: 3s; 
    animation: BackRotate 1s linear infinite; 
    animation-delay: 3s; 
} 

.face.front { 
    -webkit-animation: Rotate 1s linear infinite; 
    -webkit-animation-delay: 3s; 
    animation: Rotate 1s linear infinite; 
    animation-delay: 3s; 
} 


@-webkit-keyframes Rotate { 
    from {-webkit-transform:rotateY(0deg);} 
    to {-webkit-transform:rotateY(360deg);} 
} 
@-webkit-keyframes BackRotate { 
    from {-webkit-transform:rotateY(180deg);} 
    to {-webkit-transform:rotateY(540deg);} 
} 
@keyframes Rotate { 
    from {-webkit-transform:rotateY(0deg);} 
    to {-webkit-transform:rotateY(360deg);} 
} 
@keyframes BackRotate { 
    from {-webkit-transform:rotateY(0deg);} 
    to {-webkit-transform:rotateY(360deg);} 
} 

tôi biết làm thế nào để làm điều đó với javascript: https://jsfiddle.net/belut/fk3f47jL/1/

tôi đã cố gắng câu trả lời này nhưng không thành công: Cycling CSS3 animation with a pause period?

bạn có thể giúp tôi xin vui lòng?

EDIT Cảm ơn câu trả lời tuyệt vời tôi cũng là có thể làm cho tình huống này: 2s chờ đợi, chạy 1s lật, chờ 2s, 1s chạy back_flip, đợi 2s.

#f1_container { 
     position: relative; 
     margin: 10px auto; 
     width: 90px; 
     height: 90px; 
     z-index: 1; 
} 
#f1_container { 
     perspective: 1000; 
} 
#f1_card { 
    width: 100%; 
    height: 100%; 
} 
img { 
    width: 90px; 
    height: 90px; 
} 

.face { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     backface-visibility: hidden; 
} 
.face.back { 
     display: block; 
     transform: rotateY(180deg); 
} 

.face.back { 
    -webkit-animation: BackRotate 5s linear infinite; 
} 

.face.front { 
    -webkit-animation: Rotate 5s linear infinite; 
} 


@-webkit-keyframes Rotate { 
    0%,40% {-webkit-transform:rotateY(0deg);} 
    50%,90% {-webkit-transform:rotateY(180deg);} 
    100% {-webkit-transform:rotateY(360deg);} 
} 
@-webkit-keyframes BackRotate { 
    0%,40% {-webkit-transform:rotateY(180deg);} 
    50%,90% {-webkit-transform:rotateY(360deg);} 
    100% {-webkit-transform:rotateY(540deg);} 
} 

Answer 1

Nó có vẻ như cách duy nhất để đạt được điều này là mở rộng các hình ảnh động để nó kéo dài 4s thay vì 1s. Sau đó, bạn có thể trì hoãn hoạt ảnh bằng cách hoạt ảnh từ 75% đến 100% (thay vì 0% đến 100%).

Khi làm như vậy, về cơ bản có sự chậm trễ nhân tạo trong chính hoạt ảnh đó. Bạn chỉ cần làm toán để tìm ra khoảng thời gian trễ này tương quan với tổng chiều dài của hoạt ảnh.

Updated Example

.face.back { 
     display: block; 
     transform: rotateY(180deg); 
} 

.face.back { 
    -webkit-animation: BackRotate 4s linear infinite; 
    animation: BackRotate 4s linear infinite; 
} 

.face.front { 
    -webkit-animation: Rotate 4s linear infinite; 
    animation: Rotate 4s linear infinite; 
} 


@-webkit-keyframes Rotate { 
    75% {-webkit-transform:rotateY(0deg);} 
    100% {-webkit-transform:rotateY(360deg);} 
} 
@-webkit-keyframes BackRotate { 
    75% {-webkit-transform:rotateY(180deg);} 
    100% {-webkit-transform:rotateY(540deg);} 
} 
@keyframes Rotate { 
    75% {-webkit-transform:rotateY(0deg);} 
    100% {-webkit-transform:rotateY(360deg);} 
} 
@keyframes BackRotate { 
    75% {-webkit-transform:rotateY(180deg);} 
    100% {-webkit-transform:rotateY(540deg);} 
} 

Answer 2

tôi đã có thể làm được điều này, như @Josh đề cập, bằng cách mở rộng các hình ảnh động. Ví dụ: nếu bạn muốn hoạt ảnh của mình kéo dài 0,5 giây với thời gian tạm dừng là 3 giây, bạn sẽ tạo toàn bộ hoạt ảnh 3,5 giây và sau đó sử dụng tỷ lệ phần trăm để mở rộng. (0,5 giây là khoảng 14% trong 3,5 giây.)

Trong đoạn mã dưới đây, tôi tạo một DIV với độ dốc trong suốt có cùng chiều rộng với bố cục và sau đó làm động từ trái sang phải để tạo hiệu ứng lung linh .

.shimmer { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0px; 

    background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 
    background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 
    background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Opera11.10+ */ 
    background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* IE10+ */ 
    background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* W3C */ 
    background-repeat: repeat-y; 
    background-size: 30% 100%; 
    left: -100%; 

    z-index: 101; 

    animation-name: shine; 
    animation-duration: 3.5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
} 

@keyframes shine { 
    0% { left: -100%; } 
    14% { left: 100%; } 
    100% { left: 100%; } 
} 

Từ 14% đến 100%, DIV không di chuyển, nhưng hoạt ảnh tiếp tục trong thời gian bổ sung, cho hiệu quả tạm dừng.