Tớ khá là mới mẻ với mấy cái animation CSS3, và gần đây tớ được giao một dự án freelance cần phải tạo hiệu ứng cờ bay cho cái ảnh . Sau khi xem mấy ví dụ trên codepen với JSFiddle, tớ thấy giải pháp tốt nhất là chia nhỏ cái ảnh ra, tớ nghĩ là gọi là vậy, thành nhiều 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 khác nhau để tạo hiệu ứng cờ bay.
Đây là code của tớ:
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 chạy ngon lành trên Chrome, IE, Safari và Firefox, animation mượt mà các thứ. Tuy nhiên, dù là trên mobile hay một số trình duyệt (như Firefox), khi zoom vào thì mấy cái vạch trắng hiện ra trên ảnh (ảnh chụp màn hình), và có vẻ như bất kỳ hiệu ứng transform nào cũng gây ra vấn đề này. Đặc biệt là nó không xảy ra trên tất cả các trình duyệt, Chrome render mượt hơn IE và Firefox, ví dụ vậy, nhưng có cách nào để tớ làm mấy cái vạch trắng đó biến mất khi người dùng zoom vào không?
Nếu không giải quyết được thì tớ cũng mở lòng với các giải pháp khác để tạo animation cho cái svg này giống như một lá cờ. Cảm ơn.
