• Thống kê tình hình
    Covid-19
    Thế giới
    • 18304554Ca nhiễm
    • 694052Tử vong
    • 11508854Khỏi bệnh
    Việt Nam
    • 717Ca nhiễm
    • 8Tử vong
    • 381Khỏi bệnh
  • Hướng dẫn tạo hiệu ứng với CSS3 Animation

    Hướng dẫn tạo hiệu ứng với CSS3 Animation

    5353 lượt xem
    CHIA SẺ

    Hướng dẫn tạo hiệu ứng với CSS3 Animation

    CSS3 Animation là gì?

    Thuộc tính animation trong CSS được sử dụng để những hiệu ứng sinh động cho nhiều thuộc tính CSS khác như color,background-color,height hoặc width  . Mỗi animation cần phải được định nghĩa bằng nguyên tắc@keyframes sau đó được gọi với thuộc tínhanimation, như sau:

    Ví dụ animation thay đổi background

    HTML:

    <div class="element"></div>

    CSS:

    .ingredient {
     animation: infinite 5s pulse;
     }
    
    @keyframes pulse {
     0% {
     background color: # 001F3F;
     }
     100% {
     background color: # FF4136;
     }
     }

    Demo

     

    Mỗi @keyframes luôn tạo ra những khoảnh khắc cụ thể trong quá trình diễn ra hiệu ứng. Ví dụ, 0% là sự khởi đầu của hiệu ứng và 100% là kết thúc. Các keyframes này sau đó có thể được kiểm soát bằng thuộc tính animation viết tắt, hoặc 8 sub-properties,

    #Sub-properties(thuộc tính chính)

    • animation-name: tên của @keyframes .
    • animation-duration: khoảng thời gian để animation thực hiện hết 1 chu kỳ.
    • animation-timing-function: thiết lập các đường cong tăng tốc được đặt trước như ease hoặc linear.
    • animation-delay: thời gian giữa các phần tử được load và bắt đầu animation.
    • animation-direction: đặt hướng của animation sau chu kỳ. Mặc định của nó resets trên mỗi chu kỳ
    • animation-iteration-count: số lần animation được thực hiện.
    • animation-fill-mode: bộ giá trị được áp dụng trước / sau khi animation.

    Những sub-properties được sử dụng như sau:

    HTML:

    <div class="element"></div>

    CSS:

    @keyframes stretch {
     /* declare animation actions here */
    }
    
    .element {
     animation-name: stretch;
     animation-duration: 1.5s; 
     animation-timing-function: ease-out; 
     animation-delay: 0s;
     animation-direction: alternate;
     animation-iteration-count: infinite;
     animation-fill-mode: none;
     animation-play-state: running; 
    }

    Demo

    Dưới đây là danh sách đầy đủ các giá trị mà mỗi thuộc tính phụ có thể thực hiện:

     

    #Multiple steps (nhiều bước)

    Nếu animation có cùng tính chất bắt đầu và kết thúc, bạn nên chia các giá trị 0% và 100% bên trong @keyframes thành các dấu phẩy:

     

    @keyframes pulse {
     0%, 100% {
     background-color: yellow;
     }
     50% {
     background-color: red;
     }
    }
    
    

    #Multiple animations(nhiều animation cùng lúc)

    Bạn có thể khai báo nhiều animation trong cùng một đối tượng (selector). Trong ví dụ dưới đây, tôi muốn thay đổi màu sắc của hình tròn trong @keyframe đồng thời cho nó duy chuyển từ trái sang phải.

    Ví dụ : Link Demo

     

    #Performance(hiệu suất)

    Animation hầu hết các thuộc tính là mối liên quan về hiệu suất, vì vậy bạn nên cẩn thận với bất kì 1 thuộc tính animation nào. Tuy nhiên, có một số kết hợp nhất định có thể hoạt động 1 cách an toàn:

    • transform: translate()
    • transform: scale()
    • transform: rotate()
    • opacity

    #Những thuộc tính nào có thể thực hiện hiệu ứng animation?

    Danh sách thuộc tính CSS có thể tạo được hiệu ứng. Thường có khả thi với màu sắc và kích thước. Không thể thực hiện hiệu ứng được với background-image

     

    Kết Luận: Animation là một trong những sự kì diệu mà CSS3 mang lại . Cảm ơn bạn đã ủng hộ Fuvavi.com

    0 0 vote
    Article Rating


    Chia sẻ

    Theo dõi
    Thông báo cho
    guest
    0 Comments
    Inline Feedbacks
    View all comments

    Tiếp theo

    Vì sao cần reset CSS khi bắt đầu một project

    Vì sao cần reset CSS khi bắt đầu một project

    1177 lượt xem
    1 năm trước
    Share plugin trang trí noel cho website wordpress

    Share plugin trang trí noel cho website wordpress

    2487 lượt xem
    2 năm trước
    Thay đổi size ảnh thoải mái không lo “bị méo” với thuộc tính object-fit trong css

    Thay đổi size ảnh thoải mái không lo “bị méo” với thuộc tính object-fit trong css

    12483 lượt xem
    3 năm trước
    Tổng hợp các thuộc tính cho text trong css

    Tổng hợp các thuộc tính cho text trong css

    3364 lượt xem
    3 năm trước
    Share code 10 giao diện trang báo lỗi 404 cực đẹp chuẩn responsive

    Share code 10 giao diện trang báo lỗi 404 cực đẹp chuẩn responsive

    8460 lượt xem
    3 năm trước
    Xem thêm
    0
    Would love your thoughts, please comment.x
    ()
    x