thêm thời gian trễ trong hoạt ảnh css3

Question

Tôi chỉ đặt hoạt ảnh cho div và thành công. Bây giờ tôi muốn làm cho nó được chứng minh bởi vì sự chậm trễ của nó quá ngắn! vậy làm thế nào tôi có thể thêm thời gian trì hoãn giữa hoạt hình (0% đến 25%) và hình ảnh động (25% đến 50%) đây là mã:

#flow{ 
     position:absolute; 
     -webkit-animation:mymove 10s ease-in-out; 
     -webkit-animation-iteration-count:3; 
     -webkit-animation-delay:1s; 
    } 

@-webkit-keyframes mymove 
    { 
     0%{left:5px;} 
     25%{left:127px;} 
     50%{left:249px;} 
     75%{left:371px;} 
     100%{left:5px;} 
    } 

---

tất cả mọi người Cám ơn sự quan tâm của bạn! Tôi đã tìm thấy câu trả lời nhưng tôi không biết Api của định nghĩa về tỷ lệ phần trăm trong khung hình chính! Và nếu bạn biết sth về nó, chỉ cần cho tôi một bàn tay, cảm ơn rất nhiều!

@-webkit-keyframes mymove 
{ 
    0%{left:5px;} 
    25%{left:127px;} 
    26%{left:127px;} 
    27%{left:127px;} 
    28%{left:127px;} 
    29%{left:127px;} 
    30%{left:127px;} 
    31%{left:127px;} 
    32%{left:127px;} 
    33%{left:127px;} 
    34%{left:127px;} 
    35%{left:127px;} 
    50%{left:249px;} 
    75%{left:371px;} 
    100%{left:5px;} 
} 

Answer 1

Tôi không nghĩ bạn có thể trì hoãn một phần của hoạt ảnh. Những gì bạn có thể làm, là sử dụng hai hình động và bắt đầu với một sự chậm trễ.

#flow{ 
     position:absolute; 
     -webkit-animation: 
      mymove_first 10s 0s 10 ease-in-out, 
      mymove_second 10s 2s 10 ease-in-out; 
    } 

@-webkit-keyframes mymove_first 
    { 
     0%{left:5px;} 
     25%{left:127px;} 
    } 

@-webkit-keyframes mymove_second 
    { 
     50%{left:249px;} 
     75%{left:371px;} 
     100%{left:5px;} 
    } 

Answer 2

Tôi gặp sự cố này, theo như tôi có thể tìm thấy, không có jQuery, bạn không thể trì hoãn khung.

Bạn có thể trì hoãn bắt đầu hoạt ảnh. Bạn cũng có thể tải hình động để hoàn thành trạng thái giống như khung gốc.

Giá trị trung bình một tôi sử dụng, là việc có thể làm nhiều động tác khác, ví dụ:

div của bạn:

<div id="bannerImg" class="banner-RunAnimation"></div> 

Run hoạt hình

.RunAnimation { 
         -webkit-animation: animation1 3s 0s 1 ease-in-out, 
         animation2 5s 5s 1 ease-out forwards; 
      } 

Animations:

@-webkit-keyframes animation1 { 
0% {-webkit-transform: translateY(-0px);} 
50% {-webkit-transform: translateY(-150px);} 
100% {-webkit-transform: translateY(-150px); 
     opacity:0;} 
}  

@-webkit-keyframes animation2 { 
0% {transform: translateY(-0px);} 
100% {transform: translateY(-150px);} 
}  

D elaying các hình ảnh động và sử dụng opacity, bạn có thể làm qutie một vài điều, nếu điều này không giúp nhìn vào jQuery

Answer 3

Bạn có thể tạm dừng nó chơi với tỷ lệ phần trăm (theo gương của bạn):

@-webkit-keyframes mymove 
{ 
    0%{left:5px;} 
    25%{left:127px;} 
    35%{left:127px;} 
    50%{left:249px;} 
    75%{left:371px;} 
    100%{left:5px;} 
} 

bạn không cần phải đặt tất cả các tỷ lệ phần trăm giữa 25% và 35%, trình duyệt là bỏ qua chúng. bạn di chuyển từ 0 đến 25% từ pixel 5 đến 127, nếu hoạt ảnh của bạn là 10 giây, sẽ mất 2,5 giây để làm điều đó, sau đó tạm dừng 1 giây từ 25% đến 35% kể từ khi cùng một pixel nó sẽ không di chuyển rồi tiếp tục hoạt ảnh tiếp theo tới pixel 249, nó sẽ mất 1,5 giây và cứ thế ...

hy vọng điều này sẽ hữu ích!