Tạo chuyển động animation trong CSS3

Một trang web nếu muốn đẹp hơn nữa thì ngoài hình ảnh, chúng ta nên có các chuyển động bắt mắt người dùng. Và bài hôm nay mình sẽ giới mọi người các thuộc tính tạo chuyển động trên website trong CSS3.

1, Các thuộc tính riêng lẻ.

-Để có thế tạo được 1 chuyển động trên website thì bạn cần phải sử dụng các thuộc tính liên quan đến animation trong CSS3.

Thuộc tính @keyframes

-Thuộc tính này có tác dụng thiết lập một chuyển động.

Cú Pháp:

@keyframes Name {
  /*code*/
}

Trong đó:

Name là tên của chuyển động.
code là các đoạn code cho tiến trình chuyển động.
- Đoạn code này có thể là các phần trăm từ 0% đến 100% xem demo
- Hoặc cũng có thể là 2 thuộc tính from (tương ứng với 0 %), to (tương ứng với 100 %) xem demo

Thuộc tính animation-name

-Thuộc tính này có tác dụng xác định thành phần sẽ thực thi animation nào.

Cú Pháp:

animation-name: name;

Trong đó: name là tên của thuộc tính keyframe ở phía trên.

VD:

@keyframes move{
    from{ top: 0px;}
    to{ top: 100px;}
}
p{
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: absolute;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: orange;
}

Xem Kết Quả

Thuộc tính animation-duration

-Thuộc tính này có tác dụng thiết lập khoảng thời gian thực thị 1 chuyển động animation.

Cú pháp:

animation-duration: time;

Trong đó: time là có thể tính bằng s hoặc ms.

VD:

@keyframes move{
    from{ top: 0px;}
    to{ top: 100px;}
}
p{
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: relative;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: orange;
}

Xem Kết Quả

Thuộc tính animation-timing-function.

-Thuộc tính này có tác dụng xác định tốc độ chuyển động của một animation sẽ như thế nào.

Cú Pháp:

animation-timing-function: value;

Trong đó, value là một trong các giá trị sau:

linear - chuyển động cùng 1 tốc độ từ đầu đến cuối. xem demo
ease - chuyển động lúc đầu chậm sau đó nhanh dần và lại chậm dần về cuối (đây là giá trị mặc định) xem demo
ease-in - chuyển động chậm ở đầu xem demo
ease-out - chuyển động chậm ở nửa cuối xem demo
ease-in-out - chuyển động chậm cả ở đầu và về cuối xem demo
step-start - xem demo
step-end - xem demo
steps(int,start|end) - chia animation ra thành các bước (int) xem demo
cubic-bezier(n,n,n,n) - xem demo

Thuộc tính animation-delay.

-Thuộc tính này có tác dụng xác định độ trễ của mỗi lượt chuyển động.

Cú Pháp:

animation-delay: value;

Trong đó: value là khoảng thời gian trễ, được tính bằng s hoặc ms.

VD:

@keyframes move{
    from{ top: 0px;}
    to{ top: 200px;}
}
p{
    animation-name: move;
    animation-duration: 3s;
    /*Thiết lập thời gian trễ cho animation 2s*/
    animation-delay: 2s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    position: relative;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: orange;
}

Xem Kết Quả

Thuộc tính animation-iteration-count.

-Thuộc tính này có tác dụng, thiết lập số lần thực hiện một animation.

Cú Pháp:

animation-iteration-count: value;

Trong đó, value có thể là 1 trong các giá trị sau:

là các con số lơn hơn 0 (mặc định value = 1) xem demo
infinite - chạy không giới hạn số lần xem demo

Thuộc tính aniamtion-direction.

-Thuộc tính này có tác dụng xác định xem chiều chạy của animation sẽ như thế nào.

Cú Pháp:

aniamtion-direction: value;

Trong đó, value là 1 trong các giá trị sau:

normal - animation chạy tự bình thường (đây là giá trị mặc định) xem demo
reverse - animation sẽ chạy ngược lại so với bình thường xem demo
alternate - animation sẽ chạy bình thường ở các lượt lẻ (1,3,5,7,...) và chạy ngược lại ở các lượt chẵn (2,4,6,8,...) xem demo
alternate-reverse - animation sẽ chạy ngược lại ở các lượt lẻ (1,3,5,7,...) và chạy bình thường ở các lượt chẵn (2,4,6,8,...) xem demo

VD:

@keyframes move{
    from{ top: 0px;}
    to{ top: 100px;}
}
p{
    animation-name: move;
    animation-duration: 3s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    position: relative;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: orange;
}

Xem Kết Quả

Thuộc tính animation-fill-mode

-Thuộc tính này có tác dụng xác định trạng thái của một animation, khi mà animation không được chạy (có thể là animation này đã chạy xong hoặc đang bị delay).

Cú Pháp:

animation-fill-mode: value;

Trong đó, value có thể là một trong các giá trị sau:

none - đây là giá trị mặc định. Khi mà animation không hoạt động nữa thì nó sẽ không thêm một style nào vào thành phần.
forwards - khi mà animation không hoạt động nữa thì nó sẽ apply hết tất cả các thuộc tính cuối cùng của animation xem demo
backwards - khi mà animation không hoạt động nữa nó sẽ apply tất cả các giá trị của thuộc tính trong lần đầu xuất hiện trong keyfames (phụ thuộc vào thuộc tính anmation-direction) xem demo
both - xem demo

Thuộc tính animation-play-state

-Thuộc tính này có tác dụng xác định trạng thái của animation.

animation-platy-state: value;

Trong đó, value là 1 trong 2 giá trị sau:

running - animation đang chạy xem demo
paused - animation đang dừng xem demo

2, Thuộc tính gộp.

- Ở phần 1 mình đã hướng dẫn mọi người các thuộc tính riêng lẻ để tạo lên một chuyển động animation, nhưng có vẻ như làm như thế sẽ rất dài dòng. Và trong CSS3 có hỗ trợ chúng ta 1 thuộc tính có thể khai báo toàn bộ giá trị của các thuộc tính trên vào. Đó là thuộc tính animation.

Cú Pháp:

animation: name duration timing-function delay iteration-count direction fill-mode play-state

VD:

@keyframes move{
    from{ top: 0px;}
    to{ top: 200px;}
}
p{
    animation: move 2s infinite;
    position: relative;
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: orange;
}

Xem Kết Quả

3, Ví dụ.

-Áp dụng các thuộc tính animation mà mình vừa giới thiệu với mọi người và các thuộc tính khác mà mình đã giới thiệu trong series học CSS, CSS3. Thì mình có áp dụng và code 1 cái đồng hồ cho mọi người tham khảo.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Học CSS3 toidicode.com</title>
</head>
<style type="text/css" media="screen">
    /*Tạo chuyển động cho giây*/
    @keyframes second{
        from{ transform: rotate(-90deg);}
        to{ transform: rotate(270deg);}
    }
    /*Tạo chuyển động cho phút*/
    @keyframes minute{
        from{ transform: rotate(0deg);}
        to{ transform: rotate(360deg);}
    }
    /*Tạo chuyển động cho giờ*/
    @keyframes hour{
        from{ transform: rotate(-90deg);}
        to{ transform: rotate(270deg);}
    }
    /*CSS cho Đồng hồ*/
    .clock{
        position: relative;
        width: 320px;
        margin: 0 auto;
    }
    .radius{
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 15px solid orange;
        z-index: 2;
    }
    [class*="line-"]{
        position: absolute;
        top: 90px;
        left: 13px;
        background: black;
        width: 155px;
        height: 5px;
        z-index: -1;
    }
    .line-1{
        /*tạo góc 12h và 6h*/
        transform: rotate(-90deg);
    }
    .line-2{
        /*Tạo góc 1h và 7h*/
        transform: rotate(-60deg);
    }
    .line-3{
        /*Tạo góc 2h và 8h*/
        transform: rotate(-30deg);
    }
    .line-4{
        /*Tạo góc 3h và 9h*/
        transform: rotate(0deg);
    }
    .line-5{
        /*Tạo góc 4h và 10h*/
        transform: rotate(30deg);
    }
    .line-6{
        /*Tạo góc 5h và 11h*/
        transform: rotate(60deg);
    }
    .solid{
        background-color: white;
        width: 140px;
        height: 140px;
        position: absolute;
        border-radius: 50%;
        top: 20px;
        left: 20px;
    }
    .second{
        /*Tạo chuyển động cho kim giây chạy 60s 1 vòng*/
        animation: second 60s infinite steps(60,end);
        left: 90px;
        top: 90px;
        -webkit-transform-origin: left;
        position: absolute;
        background: gray;
        width: 65px;
        height: 2px;
    }
    .minute{
        /*Tạo chuyển động cho kim phút chạy 3600s =1h*/
        animation: minute 3600s infinite;
        left: 90px;
        top: 90px;
        -webkit-transform-origin: left;
        position: absolute;
        background: gray;
        width: 60px;
        height: 3px;
    }
    .hour{
        /*Tạo chuyển động cho kim giờ chạy 216000s  = 24h*/
        animation: hour 216000s infinite;
        left: 90px;
        top: 90px;
        -webkit-transform-origin: left;
        position: absolute;
        background: gray;
        width: 50px;
        height: 5px;
    }
    .center{
        background: red;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 80px;
        left: 78.5px;
        z-index: 10;
    }
</style>
<body>
    <div class="clock">
        <div class="line">
            <div class="line-1"></div>
            <div class="line-2"></div>
            <div class="line-3"></div>
            <div class="line-4"></div>
            <div class="line-5"></div>
            <div class="line-6"></div>
            <div class="solid"></div>
        </div>
        <div class="radius"></div>
        <div class="center"></div>
        <div class="second"></div>
        <div class="minute"></div>
        <div class="hour"></div>
    </div>
</body>
</html>

Xem Kết Quả

4, Lời kết.

-Ngày này thuộc tính animation được áp dụng rất nhiều vào trong các trang web nhằm tăng trải nghiệm của người dùng, nên bạn cần phải biết cách sử dụng các thuộc tính này...