Nhiều hoạt ảnh webkit

Tôi đang cố gắng chạy nhiều hoạt ảnh webkit cùng một lúc. Demo có thể be seen here:Nhiều hoạt ảnh webkit

HTML:

<body> 
    <div class="dot"></div> 
</body>

JavaScript:

$(function(){ 

    $('body').append('<div class="dot" style="left:100px; top:200px"></div>'); 


});

CSS:

body{ 
    background: #333; 
} 

.dot{ 
    background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%); 
    border-radius: 6px; 
    background: red; 
    display: block; 
    height: 6px; 
    position: absolute; 
    margin: 40px 0 0 40px; 
    width: 6px; 
    -webkit-box-shadow: 0 0 2px 2px #222; 




    -webkit-animation: shrink 2.s ease-out; 

    -webkit-animation: pulsate 4s infinite ease-in-out; 
    } 


    @-webkit-keyframes shrink{ 
    0%{ 
     -webkit-box-shadow: 0 0 2px 2px #222; 
     -webkit-transform: scale(2); 
    } 
    50%{ 
     -webkit-box-shadow: 0 0 2px 2px #222; 
      -webkit-transform: scale(1.5); 
     } 
    100%{ 
     -webkit-box-shadow: 0 0 2px 2px #222; 
      -webkit-transform: scale(1); 
     } 
    } 

    @-webkit-keyframes pulsate{ 
     0%{ 
      -webkit-transform: scale(1); 
     -webkit-box-shadow: 0 0 2px 2px #222; 
     } 
     50%{ 
      -webkit-transform: scale(1.1); 
     -webkit-box-shadow: 0 0 2px 2px #111; 
     } 
    100%{ 
      -webkit-transform: scale(1); 
     -webkit-box-shadow: 0 0 2px 2px #222; 
     } 
    }

Dot có hai hình ảnh động:

teo
pulsate (khó có thể nhìn thấy nhưng nó ở đó)

Có lẽ tôi cần phải tìm một cách đồng bộ tốt cho họ. Sau khi thu nhỏ hình ảnh động được thực hiện, pulsate. Tôi không thể chạy cả hai cùng một lúc để pulsate được nhận xét trong .dot.

Mọi đề xuất? Cảm ơn.

Nguồn

2012-09-25 ialphan

Tôi thực sự không thấy bất kỳ hoạt ảnh nào đang diễn ra. –

@MadaraUchiha Pulsate là hoạt hình hiện tại và thật khó nhìn thấy. Tìm bóng xung quanh (phóng to có thể giúp). Cảm ơn. – ialphan

Không, ngay cả sau khi phóng to, tôi không thể nói gì cả. Thanh tra của tôi cho tôi biết "giá trị thuộc tính không hợp lệ" trên thuộc tính hoạt ảnh. –

Bạn có thể tách nhiều động tác với một , và thiết lập một sự chậm trễ trên một giây nếu cần thiết:

-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

2s trong phim hoạt hình thứ hai là sự chậm trễ

Kể từ Chrome 43 và Safari 9/9.2, tiền tố -webkit- chỉ cần cho trình duyệt Blackberry và UC (Android). Vì vậy, cú pháp chính xác mới sẽ là

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

Nguồn

2012-09-25 20:33:39 Giona

Vậy đó. Cảm ơn. – ialphan

Tốc ký hoạt ảnh là: 'tên thời gian trễ thời gian'. Vì vậy, sẽ là 'pulsate 4s dễ dàng ra 2 giây vô hạn ' – BlueSix

+10

Odd. điều này dường như không hiệu quả với tôi. Nó chỉ tôn trọng các hình ảnh động đầu tiên, không phải là thứ hai. – Tyguy7

Nhiều hoạt ảnh webkit

Trả lời

Các vấn đề liên quan