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