Làm cách nào để tôi có thể bắt đầu Hoạt ảnh CSS3 tại một địa điểm cụ thể?

Question

Tôi đang sử dụng Ảnh động CSS3 và tôi muốn có thể di chuyển đến một vị trí cụ thể trong hoạt ảnh. Ví dụ, nếu CSS trông như thế này (và giả vờ rằng tôi đã sử dụng tất cả các tiền tố thích hợp):

@keyframes fade_in_out_anim { 
    0% { opacity: 0; } 
    25% { opacity: 1; } 
    75% { opacity: 1; } 
    100% { opacity: 0; } 
} 
#fade_in_out { 
    animation: fade_in_out_anim 5s; 
} 

sau đó tôi muốn để có thể ngăn chặn các hình ảnh động, và di chuyển nó đến vạch 50%. Tôi đoán rằng JavaScript lý tưởng sẽ trông giống như sau:

var style = document.getElementById('fade_in_out').style; 
style.animationPlayState = 'paused'; 

// Here comes the made up part... 
style.animation.moveTo('50%'); // Or alternately... 
style.animationPlayPosition = '50%'; 

Có ai biết cách để thực hiện điều này (hy vọng trong Webkit) không?

Answer 1

Chúng tôi có thể sử dụng thuộc tính animation-delay. Thông thường, nó sẽ làm chậm hoạt ảnh trong một khoảng thời gian và nếu bạn đặt animation-delay: 2s;, hoạt ảnh sẽ bắt đầu hai giây sau khi bạn áp dụng hoạt ảnh cho phần tử. Tuy nhiên, bạn cũng có thể sử dụng nó để buộc nó để bắt đầu chơi phim hoạt hình với thời gian ca cụ thể bằng cách sử dụng một giá trị âm:

.element-animation{ 
animation: animationFrames ease 4s; 
animation-delay: -2s; 
} 

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/