Zrobić pauzę podczas nieskończonej animacji CSS3

Question

Próbuję zrobić animację, która jest uruchamiana co 3 sekundy bez JavaScriptu. Czas trwania mojej animacji to 1 sekunda.

Jestem w stanie poczekać 3 sekundy na pierwsze wystąpienie, to pętla animacji 1s.

Mój kod do tej pory: 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);} 
} 

wiem, jak to zrobić z javascript: https://jsfiddle.net/belut/fk3f47jL/1/

Próbowałem tej odpowiedzi bez powodzenia: Cycling CSS3 animation with a pause period?

możesz mi pomóc proszę?

EDIT Dzięki wielkie odpowiedzi Jestem również w stanie wykonać ten scenariusz: 2s czekaj, prowadzone 1s Flip czekać 2s, prowadzone 1s back_flip, czekać 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

Wydaje się, że jedyną drogą do osiągnięcia tego celu jest rozszerzenie animacji tak, że trwa 4s zamiast 1s. Następnie możesz opóźnić animację, animując od 75% do 100% (zamiast 0% do 100%).

W ten sposób powstaje sztuczne opóźnienie samej animacji. Musisz tylko wykonać obliczenia matematyczne, aby dowiedzieć się, jak długo to opóźnienie jest skorelowane z całkowitą długością samej animacji.

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

że w stanie tego zrobić, jak @Josh wspomniano, rozszerzając animację. Na przykład, jeśli chcesz, aby animacja trwała 0,5 sekundy z 3-sekundową przerwą, tworzysz całą animację na 3,5 sekundy, a następnie używasz wartości procentowych do jej wydłużenia. (0,5 sekundy to około 14% z 3,5 sekundy.)

W poniższym kodzie utworzyłem DIV z przezroczystym gradientem o tej samej szerokości co rodzic, a następnie animowałem go od lewej do prawej, aby uzyskać efekt migotania .

.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%; } 
} 

Od 14% do 100%, DIV nie porusza, ale animacja trwa dodatkowy czas, dając efekt pauzy.