Tạo hiệu ứng cờ bay phấp phới mượt mà bằng CSS3

Tôi khá mới với các animation CSS3, và gần đây tôi được giao một dự án freelance, nơi tôi cần tạo animation cho hình ảnh sau đây thành một lá cờ đang vẫy. Sau khi xem xét các ví dụ được đăng trên codepen và JSFiddle, tôi thấy rằng giải pháp tốt nhất là cắt hình ảnh, tôi tin rằng đó là cách bạn gọi nó, thành một số phần tử rộng 1px và tạo animation cho từng phần tử với hiệu ứng chuyển đổi hơi lệch để tạo ra hiệu ứng lá cờ đang vẫy.

Đây là code của tôi:

HTML:

<div class="flag"></div>

CSS:

.flag { width: 200px; height: 30px; margin: auto; } .flag-element { -webkit-animation: oscill 2s ease-in-out infinite alternate; -moz-animation: oscill 2s ease-in-out infinite alternate; -ms-animation: oscill 2s ease-in-out infinite alternate; animation: oscill 2s ease-in-out infinite alternate; background: url('demo.svg'); max-width: 100%; background-size: 200px 100%; position: relative; height: 100%; width: 1px; display: inline-block; outline: 1px solid rgba(255, 255, 255, 0); } @-webkit-keyframes oscill { 100% { transform: translateY(3px); } } @-moz-keyframes oscill { 100% { transform: translateY(3px) rotate(0.01deg); } } @-ms-keyframes oscill { 100% { transform: translateY(3px); } } @keyframes oscill { 100% { transform: translateY(3px) rotate(0.01deg); } }

JQUERY:

$(window).on('load', function () { var h = $('.flag').width(); for (var i = 0; i < h; i++) { var flagElement = $("<div class='flag-element'>"); flagElement.css('background-position', -i + "px 0"); flagElement.css('-webkit-animation-delay', i * 10 + 'ms'); flagElement.css('-moz-animation-delay', i * 10 + 'ms'); flagElement.css('-ms-animation-delay', i * 10 + 'ms'); flagElement.css('animation-delay', i * 10 + 'ms'); $('.flag').append(flagElement); } });

Bản live

JSFiddle

Code hoạt động rất tốt trong Chrome, IE, Safari và Firefox, animation mượt mà và mọi thứ. Tuy nhiên, dù là trên di động hay một số trình duyệt (như Firefox), khi bạn bắt đầu zoom vào, các đường trắng xuất hiện trên hình ảnh (screencap), và có vẻ như bất kỳ loại hiệu ứng transform nào cũng gây ra vấn đề này. Đáng chú ý là điều này không xảy ra ở tất cả các trình duyệt, Chrome hiển thị mượt mà hơn IE và Firefox, ví dụ, nhưng có cách nào để tôi có thể làm cho những đường trắng đó ngừng xuất hiện khi người dùng zoom vào không?

Nếu điều này không thể giải quyết được, tôi cũng mở lòng với các giải pháp thay thế để tạo animation cho svg này giống như một lá cờ. Cảm ơn.