Lập trình Web
1483
04/01/2024
Tìm hiểu về hiệu ứng chuyển động animate CSS
Animation trong web design là phương pháp tạo ra các hiệu ứng chuyển động cho các yếu tố trên trang web. Trong bài viết này, ICANTECH sẽ giới thiệu một số ví dụ Animation CSS thú vị và hướng dẫn cách để bạn tạo ra animate CSS.
1. Hiệu ứng Animation CSS là gì?
Hiệu ứng Animation CSS hay còn gọi là animate CSS là cách sử dụng CSS để tạo ra các hiệu ứng chuyển động hoặc thay đổi trạng thái của một phần tử HTML một cách trơn tru. Khi sử dụng animate CSS, bạn có thể định nghĩa các keyframes (khung hình chìm) mô tả trạng thái khác nhau của phần tử trong quá trình thực hiện hiệu ứng.
Ví dụ, bạn có thể định nghĩa một animate CSS để di chuyển một hình ảnh từ vị trí này sang vị trí khác trên màn hình, hoặc để thay đổi màu sắc, kích thước, độ mờ dần.
Dưới đây là một ví dụ cơ bản về cách sử dụng CSS để tạo một hiệu ứng chuyển động:
/* Định nghĩa keyframes */
@keyframes example {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Áp dụng animation vào phần tử */
.element {
animation: example 3s infinite alternate; /* Chạy animation trong 3 giây và lặp lại vô hạn */
}
Trong ví dụ trên, animation sẽ làm phần tử element thay đổi tỉ lệ kích thước (scale) của nó từ 100% đến 120% và sau đó quay lại 100%, và quá trình này sẽ được lặp lại vô hạn trong 3 giây.
Có hai khái niệm về Animate CSS quan trọng mà bạn cần lưu ý đó 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: Thuộc tính sẽ gọi đến Keyframes mà bạn đã định nghĩa
1.1. Keyframes là gì?
Keyframes trong animate CSS là cách để xác định trạng thái hoặc "khung hình chìm" của một phần tử tại các điểm thời gian cụ thể trong quá trình thực hiện một hiệu ứng chuyển động. Bằng cách này, bạn mô tả cụ thể sự thay đổi của phần tử qua thời gian, từ trạng thái ban đầu đến trạng thái cuối cùng hoặc trạng thái khác.
Ví dụ
/* Định nghĩa keyframes với tên 'example' */
@keyframes example {
0% { transform: translateX(0px); } /* Trạng thái ban đầu */
50% { transform: translateX(100px); } /* Di chuyển 100px sang phải */
100% { transform: translateX(0px); } /* Quay lại vị trí ban đầu */
}
/* Áp dụng animation sử dụng keyframes 'example' */
.element {
animation-name: example; /* Sử dụng keyframes 'example' */
animation-duration: 3s; /* Thời gian hoàn thành animation là 3 giây */
animation-iteration-count: infinite; /* Lặp lại vô hạn */
}
Trong ví dụ trên, keyframes với tên example đã được định nghĩa để thực hiện một hiệu ứng di chuyển của phần tử .element từ vị trí ban đầu, di chuyển 100px sang phải, rồi quay lại vị trí ban đầu. Qua việc sử dụng các thuộc tính animation của CSS, chúng ta có thể áp dụng keyframes này để tạo ra hiệu ứng chuyển động trên trang web.
1.2. Animation Properties
Animation Properties trong CSS là tập hợp các thuộc tính được sử dụng để điều chỉnh và kiểm soát các hiệu ứng chuyển động được định nghĩa bằng keyframes. Các thuộc tính này cho phép bạn điều chỉnh thời gian, tốc độ, hướng, và nhiều yếu tố khác của animation.
2. Một số thuộc tính quan trọng của animate CSS
Bên cạnh việc khai báo các keyframes (khung hình chìm) animation trong CSS, chúng ta còn có thể sử dụng một số thuộc tính quan trọng khác để điều chỉnh các chi tiết của hiệu ứng. Dưới đây là một số thuộc tính quan trọng thường được sử dụng:
2.1. CSS animation name
Xác định tên của keyframes sẽ được sử dụng cho animation.
.element {
animation-name: example;
}
2.2. Animation duration
Xác định thời gian một chu kỳ hoàn thành, ví dụ: 3s (3 giây).
.element {
animation-duration: 3s;
}
2.3. Animation-timing-function
Định nghĩa cách thức mà animation thay đổi theo thời gian. Các giá trị thông dụng bao gồm: ease, linear, ease-in, ease-out, ease-in-out và nhiều giá trị hàm bezier tùy chỉnh khác.
.element {
animation-timing-function: ease-in-out;
}
2.4 Animation-delay
Xác định khoảng thời gian trước khi animation bắt đầu.
.element {
animation-delay: 1s;
}
2.5. Animation-iteration count
Xác định số lần lặp lại của animation. Nếu bạn muốn lặp lại vô hạn, bạn có thể sử dụng giá trị infinite.
.element {
animation-iteration-count: 3; /* hoặc infinite */
}
2.6. Animation-direction
Xác định hướng chạy của animation, có thể là normal, reverse, alternate hoặc alternate-reverse.
.element {
animation-direction: alternate;
}
2.7. Animation-fill-mode
Định nghĩa trạng thái của phần tử trước và sau khi animation chạy. Các giá trị bao gồm: none, forwards, backwards, và both.
.element {
animation-fill-mode: forwards;
}
2.8. Animation-play-state
Điều khiển trạng thái chạy của animation, có thể là running hoặc paused.
.element {
animation-play-state: paused;
}
3. Ví dụ
Dưới đây là ví dụ về amimate CSS “Mở một phong bì”:
body {
background: #323641;
}
.letter-image {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
cursor: pointer;
}
.animated-mail, .shadow {
transition: .4s;
}
.animated-mail {
position: absolute;
width: 200px;
height: 150px;
}
.top-fold {
width: 200px;
height: 100px;
border-color: #cf4a43 transparent transparent transparent;
transition: transform .4s .4s, z-index .2s .4s;
transform-origin: 50% 0%;
}
.letter {
position: absolute;
width: 160px;
height: 60px;
background: white;
overflow: hidden;
transition: .4s .2s;
}
.letter-image:hover .animated-mail {
transform: translateY(50px);
}
.letter-image:hover .top-fold {
transform: rotateX(180deg);
z-index: 0;
}
.letter-image:hover .letter {
height: 180px;
}
.shadow {
position: absolute;
top: 200px;
left: 50%;
width: 400px;
height: 30px;
border-radius: 100%;
background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}
.letter-image:hover .shadow {
width: 250px;
}
3. Lời Kết
Hi vọng bài viết này sẽ giúp bạn hiểu rõ hơn về Animate CSS và các thuộc tính cơ trong CSS. Chúc các bạn áp dụng kiến thức trên thành công.
Cảm ơn bạn đã đọc bài viết, nếu bạn đang quan tâm đến học lập trình online thì hãy tham khảo ngay các khóa học lập trình dưới đây tại ICANTECH nhé
Nguồn ảnh: ICANTECH.
Tags
Lập trình Web
