độ trễ hoạt ảnh không hoạt động

Question

OK, tôi có văn bản này mà tôi muốn xuất hiện sau 20 giây. Tôi đang sử dụng thuộc tính animation-delay nhưng nó không hoạt động. Có lẽ, tôi đang làm điều gì sai.

Xin hãy giúp tôi ra để có được để đi đúng hướng ..

Đây là mã của tôi ..

@import url(http://fonts.googleapis.com/css?family=Economica); 
#text{ 
font-family:'Economica', sans-serif; 
font-weight:bold; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:-20px; 
margin-top:-25px; 
animation:fade-in 5s; 
animation-delay:15s; 
-webkit-animation-delay:15s; 
-webkit-animation:fade-in 5s; 


} 

@keyframes fade-in{ 
from { opacity:0;} 
to {opacity:1;} 
} 

@-webkit-keyframes fade-in{ 
from {opacity:0;} 
to {opacity:1;} 
} 

Dưới đây là liên kết trên Fiddle

cảm ơn cho tất cả mọi thứ!

EDIT ONE:

Sau khi thay đổi thứ tự của các thuộc tính hình ảnh động, và thêm các opacity: 0 trong văn bản, tôi đã nhận như sau

#text{ 
font-family:'Economica', sans-serif; 
position:absolute; 
left:50%; 
top:50%; 
opacity:0; 
margin-left:-20px; 
margin-top:-25px; 
animation:fade-in 2s; 
animation-delay:3s; 
-webkit-animation:fade-in 2s; 
-webkit-animation-delay:3s; 
-o-animation:fade-in 2s; 
-o-animation-delay:3s; 

} 

@keyframes fade-in{ 
from { opacity:0;} 
to {opacity:1;} 
} 

@-webkit-keyframes fade-in{ 
from {opacity:0;} 
to {opacity:1;} 
} 

Nhưng nếu tôi rời khỏi opacity đến 0 trong #text, văn bản sẽ biến mất sau khi hoạt ảnh kết thúc.

Làm cách nào để giữ cho văn bản hiển thị sau khi hoạt ảnh được thực hiện ??

Cảm ơn bạn!

Answer 1

Bạn đã chỉ định các phiên bản -webkit theo thứ tự sai. -webkit-animation thay thế quy tắc trì hoãn mà bạn vừa thiết lập. Đảo ngược thứ tự sao cho độ trễ đến sau.

-webkit-animation:fade-in 5s; 
-webkit-animation-delay:15s; 

Bạn có thể tránh những vấn đề này nếu bạn luôn thiết lập một thuộc tính duy nhất:

-webkit-animation-name: fade-in; 
-webkit-animation-duration: 5s; 
-webkit-animation-delay: 15s; 

Đừng quên cũng để thiết lập:

opacity: 0; 

Nếu không thì văn bản sẽ được hiển thị cho đến khi hoạt ảnh bắt đầu và:

-webkit-animation-fill-mode: forwards; 

Vì vậy, độ mờ hoạt ảnh được giữ lại sau khi mờ dần.

Answer 2

Bạn cần đặt animation-delay quy tắc sau viết tắt, như viết tắt được đặt lại giá trị của mình để mặc định đó là 0s - hoặc bạn chỉ có thể đặt nó trong viết tắt:

#text { 
    -moz-animation: fade-in 5s 15s; 
    -webkit-animation: fade-in 5s 15s; 
    animation: fade-in 5s 15s; 
} 

http://jsfiddle.net/wXdbL/2/ (đã thay đổi độ trễ thành 1 giây sao cho hiển nhiên)