Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Hiệu ứng chuyển động trong CSS3

Tạo hiệu ứng chuyển động với CSS3 bằng thuộc tính animation-* và quy tắc @keyframes định nghĩa chuyển động.

Hiệu ứng chuyển động CSS3

Sử dụng quy tắc @keyframes

Khi bạn viết các CSS bên trong @keyframes, chuyển động xảy ra bằng cách thay đổi thuộc tính từ hiện tại sang giá trị thuộc tính chỉ định.

Để chuyển động xảy ra, bạn phải liên hệ @keyframes vói phần tử.

Ví dụ sau thay đổi màu nền:

 <style>
    div.example1 {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: keyframes1;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }
    @keyframes keyframes1 {
        0%  {background-color: red;}
        50%  {background-color: yellow;}
        70%  {background-color: blue;}
        100% {background-color: green;}
    }
</style>
<div class="example1"></div>

Qua ví dụ trên cần lưu ý

  • animation-name là thuộc tính chỉ ra @keyframes định nghĩa sự thay đổi các thuộc tính
  • animation-duration là khoảng thời gian diễn ra một hiệu ứng
  • animation-iteration-count nhận các giá trị là số lần hiệu ứng xảy ra (mặc dịnh là 1), nếu thiết lập infinite lặp lại mãi mãi

from ... to

@keyframes có từ khóa thay thế để thiết lập giá trị từ khởi đầu đến kết thúc là from, to

Ví dụ:

@keyframes colorchange {
   from {background-color: red;}
   to {background-color: green;}
}

Tương đương với

@keyframes colorchange {
   0% {background-color: red;}
   100% {background-color: green;}
}
<style>
    div.example2 {
        animation-name: keyframes2;
        animation-duration: 2s;
        animation-timing-function: ease-in;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        position: relative;

    }

    @keyframes  keyframes2{
        from {
            left: 0;
            width: 10px;
            height: 10px;
            background-color: red;
        }
        to {
            left: 300px;
            height: 100px;
            width: 300px;
            background-color: green;
        }
    }

</style>
<div class="example2"></div>

Các thuộc tính animattion-* có thể viết gọn lại trên một dòng bằng thuộc tính animate ví dụ: animation: keyframes2 2s ease-in 1s infinite alternate-reverse;

Một vài thuộc tính animatiion

  • animation-fill-mode : forwards giữ lại kết của sau hiệu ứng

Vui lòng đăng ký ủng hộ kênh