Trong bài đăng này, hãy tìm hiểu cách tạo một số ảnh động phổ biến trên CodePen. Tất cả các ảnh động này đều sử dụng các kỹ thuật hiệu quả được thảo luận trong các bài viết khác trong phần này.
Hãy xem bài viết Tại sao một số ảnh động lại chậm? để tìm hiểu lý thuyết đằng sau các đề xuất này và Hướng dẫn về ảnh động để biết các mẹo thực tế.
Ảnh động về trạng thái đang tải của trình hướng dẫn
Xem ảnh động tải trình hướng dẫn trên CodePen
Ảnh động tải này được tạo hoàn toàn bằng CSS. Hình ảnh và tất cả ảnh động đều được tạo bằng CSS và HTML, không có hình ảnh hoặc JavaScript. Để hiểu cách tạo và hiệu suất của trang, bạn có thể sử dụng Chrome DevTools.
Kiểm tra ảnh động bằng Chrome DevTools
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Chrome DevTools và ghi lại vài giây của ảnh động. Bạn sẽ thấy trong phần Tóm tắt rằng trình duyệt không thực hiện bất kỳ thao tác Bố cục hoặc Vẽ nào khi chạy ảnh động này.
Để tìm hiểu cách đạt được ảnh động này mà không gây ra bố cục và tạo điểm ảnh, hãy kiểm tra bất kỳ phần tử chuyển động nào trong Chrome DevTools. Bạn có thể sử dụng Bảng điều khiển ảnh động để tìm các phần tử ảnh động, nhấp vào bất kỳ phần tử nào sẽ làm nổi bật phần tử đó trong DOM.
Ví dụ: chọn hình tam giác, và xem cách hộp của phần tử biến đổi trong hành trình bay lên không trung, khi nó quay, rồi quay lại vị trí bắt đầu.
Khi phần tử vẫn được chọn, hãy xem Bảng điều khiển kiểu. Tại đó, bạn có thể thấy CSS vẽ hình tam giác và ảnh động đang được sử dụng.
Cách hoạt động
Hình tam giác được tạo bằng cách sử dụng phần tử giả ::after để thêm nội dung được tạo, sử dụng đường viền để tạo hình dạng.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
Ảnh động được thêm bằng dòng CSS sau:
animation: path_triangle 10s ease-in-out infinite;
Khi vẫn ở trong Chrome DevTools, bạn có thể tìm thấy các khung hình chính bằng cách cuộn xuống Bảng kiểu.
Tại đây, bạn sẽ thấy ảnh động được tạo bằng cách sử dụng transform để thay đổi vị trí của phần tử và xoay phần tử đó.
Thuộc tính transform là một trong các thuộc tính được mô tả trong Hướng dẫn về ảnh động, không khiến trình duyệt thực hiện các thao tác bố cục hoặc vẽ (đây là nguyên nhân chính khiến ảnh động bị chậm).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
Mỗi phần chuyển động khác nhau của ảnh động này đều sử dụng các kỹ thuật tương tự. Kết quả là một ảnh động phức tạp chạy mượt mà.
Vòng tròn nhấp nháy
Xem vòng tròn nhấp nháy trên CodePen
Loại ảnh động này đôi khi được dùng để thu hút sự chú ý đến một nội dung nào đó trên trang. Để hiểu rõ về ảnh động, bạn có thể sử dụng Công cụ cho nhà phát triển của Firefox.
Kiểm tra ảnh động bằng Công cụ của Firefox cho nhà phát triển
Khi ảnh động đang chạy, hãy mở thẻ Hiệu suất trong Công cụ cho nhà phát triển của Firefox và ghi lại vài giây của ảnh động. Dừng ghi, trong thác nước, bạn sẽ thấy không có mục nào cho Tính toán lại kiểu. Giờ bạn đã biết rằng ảnh động này không gây ra việc tính toán lại kiểu, và do đó không gây ra các thao tác bố cục và vẽ.
Tiếp tục sử dụng Công cụ cho nhà phát triển của Firefox để kiểm tra vòng tròn và xem cách ảnh động này hoạt động.
<div> có lớp pulsating-circle đánh dấu vị trí của vòng tròn, tuy nhiên, nó không tự vẽ vòng tròn.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Bạn có thể tạo vòng tròn hiển thị và ảnh động bằng cách sử dụng các phần tử giả ::before và ::after.
Phần tử ::before tạo vòng mờ kéo dài ra ngoài vòng tròn màu trắng, sử dụng ảnh động có tên là pulse-ring, tạo ảnh động transform: scale và opacity.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
Một cách khác để xem thuộc tính nào đang được tạo ảnh động là chọn bảng điều khiển Animations (Ảnh động) trong Công cụ cho nhà phát triển của Firefox. Sau đó, bạn sẽ thấy hình ảnh trực quan của ảnh động đang được sử dụng và các thuộc tính đang được tạo ảnh động.
Bản thân vòng tròn màu trắng được tạo và tạo ảnh động bằng phần tử giả ::after.
Ảnh động pulse-dot sử dụng transform: scale để tăng và giảm kích thước dấu chấm trong ảnh động.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
Bạn có thể sử dụng ảnh động như thế này ở nhiều nơi trong ứng dụng, điều quan trọng là những chi tiết nhỏ này không ảnh hưởng đến hiệu suất tổng thể của ứng dụng.
Hình cầu 3D thuần CSS
Xem Pure CSS 3D Sphere trên CodePen
Ảnh động này có vẻ cực kỳ phức tạp, tuy nhiên, ảnh động này sử dụng các kỹ thuật mà chúng ta đã thấy trong các ví dụ trước. Sự phức tạp đến từ việc tạo ảnh động cho một số lượng lớn phần tử.
Mở Chrome DevTools rồi chọn một trong các phần tử có lớp plane.
Hình cầu được tạo thành từ một tập hợp các mặt phẳng và nan hoa xoay.
Các mặt phẳng và nan hoa này nằm bên trong một trình bao bọc <div>,
và chính phần tử này đang xoay bằng transform: rotate3d.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
Bạn có thể tìm thấy các dấu chấm được lồng bên trong các phần tử plane và spoke,
chúng sử dụng ảnh động dùng phép biến đổi để điều chỉnh tỷ lệ và dịch chuyển chúng.
Thao tác này sẽ tạo ra hiệu ứng xung.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
Công việc liên quan đến việc tạo ảnh động này là căn thời gian phù hợp, để tạo hiệu ứng xoay và nhấp nháy. Bản thân ảnh động khá đơn giản và sử dụng các phương thức hoạt động rất hiệu quả.
Bạn có thể xem hiệu suất của ảnh động này bằng cách mở Chrome DevTools và ghi lại Hiệu suất trong khi ảnh động đang chạy. Sau lần tải ban đầu, ảnh động không kích hoạt Bố cục hoặc Vẽ và chạy mượt mà.
Kết luận
Qua những ví dụ này, bạn có thể thấy cách tạo ảnh động cho một vài thuộc tính bằng các phương thức hiệu quả có thể tạo ra một số ảnh động rất thú vị. Bằng cách mặc định sử dụng các phương thức hiệu quả được mô tả trong Hướng dẫn về ảnh động, bạn có thể dành thời gian tạo hiệu ứng mong muốn mà không cần lo lắng về việc làm chậm trang.