Bài viết hướng dẫn tạo hiệu ứng rung lắc với CSS Animation, có thể dùng để gây chú ý vào một phần tử nào đó trên trang web của bạn.

Tạo hiệu ứng rung lắc với CSS Animation

Đây là Demo!

CSS

Đầu tiên, để tạo hiệu ứng rung lắc với CSS, bạn cần thêm đoạn CSS sau.

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

Sử dụng

Để sử dụng, các bạn dùng jQuery để thêm hiệu ứng vào thẻ cần rung lắc.

$('#element').css('animation', 'shake 0.5s 2');

Chúc các bạn thành công!

5/5 (1 bình chọn)
Chia sẻ
Series: Thủ thuật Front-end