Bài viết hướng dẫn tạo hiệu ứng rung lắc đơn giản 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 bạ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!

Series: Thủ thuật Front-end