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 suất cao đượ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ạy chậm? để tìm hiểu lý thuyết đằng sau những đề 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à toàn bộ ảnh động đượ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 này, bạn có thể sử dụng Công cụ của Chrome cho nhà phát triển.
Kiểm tra ảnh động bằng Công cụ của Chrome 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 Chrome rồi ghi lại ảnh động trong vài giây. Trong phần Tóm tắt, bạn sẽ thấy rằng trình duyệt không thực hiện bất kỳ thao tác Bố cục hoặc Hiển thị nào khi chạy ảnh động này.
Để tìm hiểu cách đạt được hiệu ứng chuyển động này mà không gây ra bố cục và vẽ, hãy kiểm tra bất kỳ phần tử chuyển động nào trong Công cụ cho nhà phát triển của Chrome. Bạn có thể sử dụng Bảng điều khiển ảnh động để xác định vị trí của nhiều phần tử động. Khi nhấp vào một phần tử bất kỳ, phần tử đó sẽ được đánh dấu trong DOM.
Ví dụ: chọn hình tam giác và quan sát 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ó xoay và sau đó quay trở lại vị trí ban đầu.
Khi phần tử vẫn đang được chọn, hãy xem Bảng điều khiển kiểu. Ở đó, bạn có thể thấy CSS vẽ hình tam giác và ảnh động đang được 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 đây,
animation: path_triangle 10s ease-in-out infinite;
Khi ở trong Công cụ cho nhà phát triển của Chrome, bạn có thể tìm thấy các khung hình chính bằng cách di chuyển xuống Bảng điều khiển kiểu.
Tại đó, bạn sẽ thấy rằng ả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 những 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à những 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 trong ả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õ ảnh động, bạn có thể sử dụng Công cụ dành cho nhà phát triển của Firefox.
Kiểm tra ảnh động bằng Công cụ cho nhà phát triển của Firefox
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 rồi ghi lại ảnh động trong vài giây. Dừng ghi, trong thác nước, bạn sẽ thấy không có mục nào cho Recalculate Style (Tính toán lại kiểu). Giờ đây, 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, do đó không gây ra các thao tác bố cục và vẽ.
Trong Firefox DevTools, hãy kiểm tra hình tròn để xem cách hoạt động của ảnh động này.
<div> có lớp pulsating-circle đánh dấu vị trí của hình tròn, tuy nhiên, bản thân lớp này không vẽ hình tròn.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
Vòng tròn và ảnh động có thể nhìn thấy được tạo bằng cách sử dụng các phần tử giả ::before và ::after.
Phần tử ::before tạo ra vòng tròn mờ mở rộng ra bên ngoài vòng tròn màu trắng, bằng cách sử dụng một ảnh động có tên là pulse-ring, ảnh động này sẽ tạo ảnh động cho 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 những thuộc tính đang được tạo hiệu ứng là chọn bảng điều khiển Ảnh động trong Công cụ cho nhà phát triển của Firefox. Sau đó, bạn sẽ thấy hình ảnh minh hoạ về các ảnh động đang được sử dụng và các thuộc tính đang được tạo ảnh động.
Vòng tròn màu trắng được tạo và chuyển động bằng cách sử dụng phần tử giả ::after.
pulse-dot của ảnh động 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 một ảnh động như thế này ở nhiều nơi trong ứng dụng. Điều quan trọng là những điểm nhấn nhỏ này không ảnh hưởng đến hiệu suất tổng thể của ứng dụng.
Quả cầu 3D CSS thuần tuý
Xem quả cầu 3D CSS thuần tuý 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. Độ phức tạp đến từ việc tạo hiệu ứng cho một số lượng lớn các phần tử.
Mở Công cụ của Chrome cho nhà phát triển rồi chọn một trong các phần tử có lớp plane.
Quả cầu này đượ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);
}
}
Các dấu chấm có thể được tìm thấy lồng bên trong các phần tử plane và spoke, chúng sử dụng một ảnh động dùng phép biến đổi để chia tỷ lệ và dịch các dấu chấm đó.
Thao tác này sẽ tạo ra hiệu ứng nhấp nháy.
.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à phải điều chỉnh thời gian cho phù hợp, tạo hiệu ứng xoay và nhấp nháy. Bản thân các ả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ở Công cụ cho nhà phát triển của Chrome và ghi lại Hiệu suất trong khi ảnh động đang chạy. Sau lần tải ban đầu, ảnh động sẽ không kích hoạt Bố cục hoặc Vẽ và chạy mượt mà.
Kết luận
Từ những ví dụ này, bạn có thể thấy cách tạo một số hiệu ứng chuyển động rất thú vị bằng cách chuyển động một vài thuộc tính bằng các phương thức hiệu quả. 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 mà mình muốn mà không cần lo lắng về việc làm chậm trang.