Hiệu ứng chuyển động Animation CSS cho người mới bắt đầu
05/08/2022 09:35 am | Lượt xem : 11718
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ì?
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.
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ư:
- Thuộc tính animation-name
- Thuộc tính animation-duration
- Thuộc tính animation-timing-function
- Thuộc tính animation-delay
- Thuộc tính animation-iteration-count
- Thuộc tính aniamtion-direction
- Thuộc tính animation-fill-mode
Chúng ta có hai khái niệm Animation CSS quan trọng đó là:
- @keyframes: Định nghĩa chuyển động của đối tượng về bản chất nó là các thuộc tính Animation CSS
- Animation Properties: Nó là thuộc tính sẽ gọi đến Keyframes mà bạn đã định nghĩa
#1: Keyframes
Keyframes là nền tảng của Animation CSS giúp tạo ra các hiệu ứng, những gì mà chúng ta nhìn thấy.
Thành phần của @keyframes gồm:
Tên của animation: 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
Stages của animation: 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
Thuộc tính CSS: 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
Bây giờ, chúng ta có một @keyframes có tên là “bounceIn” được chia thành các Stages: 0%, 60% và 100%. Trong mỗi stages qui định transform: scale và opacity khác nhau:
@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
Tiếp theo chúng ta sẽ sử dụng @keyframe bounceIn đã định nghĩa ở trên như sau
div { animation-duration: 2s; animation-name: bounceIn; }
Thuộc tính animation-name là tên của @keyframes được định nghĩa ở trên, cụ thể ở đây là bounceInt
animation-duration: 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
Shorthand là cách viết thuộc tính CSS ngắn gọn, các bạn có thể liên tưởng đến thuộc trính background. Chúng ta có thể viết là background: red; hoặc viết background-color: red; đều được. Animation properties cũng vậy.
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
Viết riêng từng thuộc tính Animation CSS thì:
animation-name: value;
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ố
Cuối năm 2014, rất nhiều trình duyệt dựa trên Webkit vẫn phải sử dụng tiền tố -webkit-… cho animations, keyframes, và transitions. Cho đến khi áp dụng phiên bản tiêu chuẩn, tuy nhiên nếu bạn vẫn muốn sử dụng cả -webkit thì làm như sau:
div {
-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 */ }
Để 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 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
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-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;/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;/* Multiple values */
animation-iteration-count: 2, 0, infinite;
Animation-direction
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;/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;/* Global values */
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;/* Multiple animations */
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;/* Multiple animations */
animation-play-state: paused, running, running;/* Global values */
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.
MiraWEB – Tạo website tự động bằng AI trong 30 giây
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