Hướng dẫn animation css property - thuộc tính css hoạt hình

Animation được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng phổ biến trong các website hiện nay.

Trong bài viết này, Tenten tổng hợp một số ví dụ Animation CSS thú vị mà chúng tôi đã thấy và chỉ cho bạn cách tạo lại chúng.  Trong phạm vi của bài viết này, chúng ta cùng tìm hiểu về những khái niệm quan trọng của Animation CSS, mỗi phần mình sẽ đưa ra những demo cụ thể để các bạn nắm được. Let’s go…

Contents

  • Hiệu ứng Animation CSS là gì?
  • #1: Keyframes
    • Cách dùng ngắn gọn
  • #2: Animation property shorthand
    • Lưu ý về tiền tố
  • Animation-timing-function
  • Sử dụng shorthand
  • Animation-delay
  • Animation iteration count
  • Animation-direction
  • Animation-fill-mode
  • Animation-play-state
  • Lời kết 
  • Các tìm kiếm liên quan đến chủ đề “Animation CSS”
    • Bài viết liên quan

Hiệu ứng Animation CSS là gì?

#1: Keyframes

Hướng dẫn animation css property - thuộc tính css hoạt hình

Cách dùng ngắn gọn

#2: Animation property shorthand

Lưu ý về tiền tố

Sử dụng shorthand

  • Animation iteration count
  • Lời kết 
  • Các tìm kiếm liên quan đến chủ đề “Animation CSS”
  • Bài viết liên quan
  • Hiệu ứng (animation CSS) ngày càng được quan tâm và chú trọng hơn về mặt hình thức và thẩm mỹ trên các trang web ngày nay. Nó làm tăng thêm tính động cho một website. Bên cạnh đó nó cũng đòi hỏi phải đảm bảo được hiệu suất của trang, điều này có nghĩa là việc sử dụng hiệu ứng không không ảnh hưởng đến tốc độ load trang. Và Animation CSS sinh ra để thực hiện điều đó.
  • Animation CSS được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng khá nhiều trong các website hiện nay.
  • Animation CSS là một phương pháp tạo hoạt ảnh cho các phần tử HTML nhất định mà không cần phải sử dụng bộ xử lý và JavaScript hoặc Flash ngốn bộ nhớ. Không có giới hạn về số lượng hoặc tần suất các thuộc tính CSS có thể được thay đổi. Animation CSS được bắt đầu bằng cách chỉ định khung hình chính cho hoạt ảnh: những khung hình chính này chứa các kiểu mà phần tử sẽ có.

Để tạo một chuyển động Animation CSS, bạn cần phải có các keyframe. Mỗi keyframe sẽ được chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao.

  1. Ngoài ra, Animation CSS còn gồm một số thuộc tính quy định các chi tiết khá quan trọng của hiệu ứng thường đi kèm như:
  2. Thuộc tính animation-name

Hướng dẫn animation css property - thuộc tính css hoạt hình

#1: Keyframes

Cách dùng ngắn gọn

#2: Animation property shorthand@keyframes gồm:

Lưu ý về tiền tố: Các bạn hiểu đơn giản nó giống như đặt tên function trong Javascript ấy, sau này muốn dùng chỗ nào thì gọi thôi. Ví dụ: bounceIn

Sử dụng shorthand: Stages của animation được qui định từ 0% đến 100%. Bạn có thể chia thành nhiều khoảng khác nhau tùy theo ý đồ của chuyển động

Animation iteration count: Là những thuộc tính của CSS, được định nghĩa trong mỗi stages, yếu tố quan trọng để tạo nên hiệu ứng

Lời kết transform: scale opacity khác nhau:

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

Các tìm kiếm liên quan đến chủ đề “Animation CSS”@keyframe bounceIn đã định nghĩa ở trên như sau

div {
  animation-duration: 2s;
  animation-name: bounceIn;
}

Bài viết liên quanbounceInt

Hiệu ứng (animation CSS) ngày càng được quan tâm và chú trọng hơn về mặt hình thức và thẩm mỹ trên các trang web ngày nay. Nó làm tăng thêm tính động cho một website. Bên cạnh đó nó cũng đòi hỏi phải đảm bảo được hiệu suất của trang, điều này có nghĩa là việc sử dụng hiệu ứng không không ảnh hưởng đến tốc độ load trang. Và Animation CSS sinh ra để thực hiện điều đó. là thời gian chạy animation, đơn vị là giây

Cách dùng ngắn gọn

div {
  animation: bounceIn 2s;
}

#2: Animation property shorthand

Hướng dẫn animation css property - thuộc tính css hoạt hình

Lưu ý về tiền tố

Sử dụng shorthand
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];

Animation iteration count

Lời kết 
animation-duration: value;
animation-timing-function: value;
animation-delay: value;
animation-iteration-count: value;
animation-direction: value;
animation-fill-mode: value;
animation-play-state: value;

Lưu ý về tiền tố

Sử dụng shorthand

Animation iteration count
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}

Hoặc như thế này

@-webkit-keyframes bounceIn { /* styles */ }@keyframes bounceIn { /* styles */ }
@keyframes bounceIn { /* styles */ }

Để dễ ràng hơn nữa thì bạn có thể dùng Bourbon, một mixin của Sass và sử dụng được cho tất cả các trình duyệt web hiện đại.

div {@include animation(bounceIn 2s);}
@include animation(bounceIn 2s);
}

@include keyframes(bouncein) { /* styles */}

Ngoài những thuộc tính bắt buộc là animation-name và animation-duration chúng ta có thể sử dụng thêm một số thuộc tính dưới đây.

  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-States

Hướng dẫn animation css property - thuộc tính css hoạt hình

Animation-timing-function

Thuộc tính The animation-timing-function qui định đường cong và tốc độ của hiệu ứng. Bạn có thể định nghĩa timing với các option sau: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit. Giá trị mặc định của timing là ease

animation-timing-function: ease-in-out;

Sử dụng shorthand

animation: [animation-name] [animation-duration] [animation-timing-function];animation: bounceIn 2s ease-in-out;
animation: bounceIn 2s ease-in-out;

Animation-delay

Animation-delay cho phép bạn định nghĩa thời gian trễ trước khi hiệu ứng bắt đầu chạy.

Animation iteration count

Thuộc tính animation-iteration-count cho phép quy định số lần lặp đi lặp lại của kiểu ứng trước khi stop

Thuộc tính này có 3 kiểu giá trị là: String values, Number values và Multiple values

/* Keyword value */animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* values */animation-iteration-count: 3;animation-iteration-count: 2.4;
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* Multiple values */animation-iteration-count: 2, 0, infinite;
animation-iteration-count: 2, 0, infinite;

Animation-direction

Hướng dẫn animation css property - thuộc tính css hoạt hình

Thuộc tính animation-direction qui định đối tượng khi chuyển động có di chuyển quay lại với bị trí ban đầu mà nó xuất phát hay không và cách quay đầu như thế nào.

/* Single animation */animation-direction: normal;animation-direction: reverse;animation-direction: alternate;animation-direction: alternate-reverse;
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */animation-direction: normal, reverse;animation-direction: alternate, reverse, normal;
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */animation-direction: inherit;animation-direction: initial;animation-direction: unset;
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Animation-fill-mode

Thuộc tính này qui định tính chất CSS của một đối tượng animation trước khi sau khi animation đó được thực thi

/* Single animation */animation-fill-mode: none;animation-fill-mode: forwards;animation-fill-mode: backwards;animation-fill-mode: both;
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */animation-fill-mode: none, backwards;animation-fill-mode: both, forwards, none;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Animation-play-state

Thuộc tính animation-play-state cho phép quy định trạng thái của đối tượng animation với 2 stage chính là runing hoặc paused

/* Single animation */animation-play-state: running;animation-play-state: paused;
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */animation-play-state: paused, running, running;
animation-play-state: paused, running, running;

/* Global values */animation-play-state: inherit;animation-play-state: initial;animation-play-state: unset;
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

Lời kết 

Hy vọng bài viết này giúp các bạn có cái nhìn tổng quan về Animation CSS và nắm được những thuộc tính Animation cơ bản trong CSS, ở những bài sau chúng ta sẽ tìm hiểu chi tiết hơn.

Các tìm kiếm liên quan đến chủ đề “Animation CSS”

animation css generator fade in animation css
animation css codepen animation css library
keyframes animation css entrance animation css
text animation css image animation css

Bài viết liên quan

CSS Selector được hiểu như thế nào? 5+ loại CSS Selector bạn cần biết

7 thuộc tính display CSS bạn cần biết

3 cách xác định giá trị màu sắc cơ bản bảng màu CSS

Thuộc tính keyframe css là gì? 3 yếu tố cấu thành không thể thiếu