Hôm nay bạn sẽ học cách dùng CSS animations làm SVG icon mũi tên bounce lên xuống. Bạn cũng sẽ học cách tinh chỉnh animation type, timing, duration với nhiều CSS animation properties.
Tại sao điều này hữu ích?
Animations, khi làm đúng, có thể:
- Hướng dẫn users
- Khuyến khích users hành động
- Thu hút attention của users (trong khi bạn vẫn có nó).
Yêu cầu
Bạn cần text editor để theo dõi. Nếu chưa có local dev environment, tôi khuyên CodePen. Bạn có thể code ngay lập tức.
Được, bắt đầu thôi!
HTML: thêm container & mũi tên
Để tái tạo demo, bạn cần bốn HTML elements:
- Image element cho arrow icon
- Span element cho text label trên mũi tên
- Container-footer element wrap quanh arrow & text label
- Container element wrap quanh tất cả elements
Đi đến HTML editor và thêm markup sau bên trong element <body></body>:
<div class="container"> <div class="container-footer"> <span class="text-label">Explore</span> <svg class="arrow-circle-down bounce" viewbox="0 0 1792 1792" xmlns="https://www.w3.org/2000/svg"> <path d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="#fff"></path> </svg> </div> </div>Arrow code chúng ta thêm ở trên là dạng SVG. Nó dựa trên thư viện icon Font Awesome CSS.
Bạn có thể chọn hàng trăm Font Awesome icons dạng SVG từ GitHub repo này.
Tiết kiệm resources!
Nhiều website load toàn bộ Font Awesome library nhưng chỉ dùng một ít icon — lãng phí bandwidth. Bạn tiết kiệm nhiều resources bằng cách download 5-10 icon bạn thực sự cần dạng SVG.
Ví dụ này, chúng ta nhúng SVG file trực tiếp trong HTML markup. Cách này gọi là inline SVG. Có nhiều cách khác thêm SVG cho mục đích khác — nhưng tôi dành cho tutorial khác.
Tôi dùng SVG icon này trong tutorial.
Nếu so sánh SVG source gốc với cái trong HTML markup trên, bạn thấy tôi làm vài thay đổi:
- Xóa width và height properties (file gốc to quá)
- Thêm class:
arrow-circle-downcần cho CSS section.
Ok next, thêm chút styling, rồi đến phần vui: CSS animations!
Styling container và arrow với CSS
Trong CSS stylesheet, thêm rule-sets sau (classes, properties, values):
* { margin: 0; padding: 0; } .container { display: flex; background-color: #26a1ff; height: 100vh; } .container-footer { display: flex; flex-direction: column; align-items: center; margin: auto auto 1rem auto; } .text-label { text-transform: uppercase; font-family: helvetica; font-size: 0.75rem; letter-spacing: 0.2em; color: #fff; } .arrow-circle-down { display: block; width: 40px; height: 40px; margin: 16px 0; }Làm mới browser, nó nên trông như sau:
Giải thích CSS:
- Đầu tiên, parent div element class
.containerheight 100vh. Làm nó chiếm toàn bộ viewport, mọi device. Dùngdisplay: flex;làm flex container, cần cho arrow & text label. Cũng cho background color xanh nhẹ đẹp mắt. - Sau đó class
.arrow-circle-downwidth và height cố định 40px để không chiếm nhiều space. Nên nhận thấy nhưng không distracting. - Class
.text-labelcó chút styling cosmetic với uppercase và letter-spacing. Tự do thay đổi theo sở thích. - Class
.container-footermargin auto top, right, left. Buộc container footer và children (icon & text) xuống đáy parent container — nơi chúng ta muốn. Bottom margin1rem;đảm bảo mọi thứ trong viewport khi arrow bounce. - Class
.container-footercũng có flex properties:flex-direction: column;vàalign-items: center;. Các property này làm text và icon stack lên nhau và căn giữa chính xác container footer.
Để rõ ràng, declaration margin: auto auto 1rem auto là shorthand đẹp cho verbose hơn:
margin-top: auto; margin-right: auto; margin-bottom: 1rem; margin-left: auto;Tiếp theo, làm arrow bounce với CSS animations!
Animating scroll down arrow với CSS
Nhiều cách animate, cả CSS, JavaScript, và kết hợp. Ví dụ này, animate thuần CSS.
Chúng ta đã thêm class .bounce vào image element chứa SVG arrow. Hiện tại nó không làm gì vì chưa define/style class trong CSS.
Thêm sau vào CSS stylesheet:
.bounce { animation: bounce 2s; } @keyframes bounce { 0%, 25%, 50%, 75%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-12px); } }Và bây giờ, bạn có bouncing arrow:
Giải thích code CSS
Trên SVG element với arrow, chúng ta có class .bounce. Class này có property animation.
Property animation có hai giá trị, bounce và 2s.
Giá trị bounce là function trigger @keyframe animation @keyframes bounce mà tôi sẽ giải thích ngay.
Giá trị 2s (hai giây) là tổng thời gian @keyframe animation nên chạy.
The @keyframe animation:
- Tổng duration hai giây (set bởi
animation property.) - Tổng cộng bảy keyframes khác nhau. 0%, 25%, 40%, 50%, 60%, 75%, và 100%.
- Ba vị trí tọa độ Y khác nhau: Y(0), Y(-20px) và Y(-12px). Các tọa độ này quy định arrow element di chuyển lên/xuống tại các điểm thời gian (keyframes) khác nhau.
Khối @keyframe đầu tiên {..} nói rằng tại chính xác năm keyframes: 0%, 25%, 50%, 75%, 100% — arrow nên ở vị trí bắt đầu, Y(0px).
0%, 25%, 50%, 75%, 100% { transform: translateY(0); }Khối @keyframe thứ hai nói tại 40% mark, arrow nên di chuyển lên, bằng vị trí Y(-20px).
40% { transform: translateY(-20px); }Khối keyframe thứ ba nói tại 60% mark, arrow nên di chuyển lên lần nữa. Lần này chỉ di chuyển lên khoảng một nửa lần đầu, bằng vị trí Y(-12px).
60% { transform: translateY(-12px); }Chú ý giữa hai keyframes arrow di chuyển lên (40% và 60%) nó quay về Y(0) tại keyframe 50%. Đó là điều làm arrow move up down hai lần, tương đối nhanh trong khoảng thời gian ngắn.
Tôi quyết định chỉ move arrow -12px ở vị trí thứ ba vì nó mô phỏng bouncing ball thực tế. Lần thứ hai ball chạm đất nó move lên ít hơn lần đầu rất nhiều. Mức độ bounce (và độ cao) tất nhiên phụ thuộc nhiều yếu tố: trọng lượng, tốc độ, vật liệu, v.v. nhưng chỉ cho chúng ta nhiều "wiggle room" hơn, vì không có một cách duy nhất.
Nếu CSS animation gây nhầm lẫn, thử thay đổi duration và CSS property transform translate. Với chút practice, sẽ dễ connect the dots hơn.
- Thử cho 40% keyframe transform translate -48px xem sao.
- Thử cho CSS property
animationduration 5 giây thay vì 2. Rồi thử 100ms (có thể dùng milliseconds thay seconds).
Thường dễ drive concept home nếu experiment với extremes. Đó thường là nơi tôi có "aha" moments.
Experiment!
CSS animations có vô vàn possibilities. Hãy check nhanh vài variation cho animation hiện có.
Property animation-delay
Hiện tại arrow bounce ngay khi webpage load. Bạn có thể muốn delay một chút, để users không bị distract trong giây đầu vào site.
Làm bằng cách thêm property animation delay vào class .bounce:
.bounce { animation: bounce 2s; animation-delay: 5s; }Bây giờ keyframe animation hai giây không chạy cho đến đúng năm giây sau khi page load.
Property animation iteration count
Đôi khi muốn repeat animation vài lần. Để repeat animations dùng property animation-iteration-count:
.bounce { animation: bounce 2s; animation-delay: 5s; animation-iteration-count: 2; }Bây giờ arrow bắt đầu bounce sau năm giây, nhưng lần này repeat keyframe animation thêm một lần nữa.
Infinite CSS animation
Đôi khi, hiếm khi, muốn CSS animation chạy vô hạn. Làm bằng cách đổi animation iteration count thành infinite;:
.bounce { animation: bounce 2s; animation-iteration-count: infinite; }Nhưng cẩn thận với infinite animations. Không ai thích animation quay mãi mãi.
Ngoại lệ: nếu bạn có living space background với nhiều ngôi sao nhỏ có subtle blinking animations. Bạn có thể muốn loop/repeat animation cho purpose đó, giữ atmosphere dynamic.
Autoprefixer
Để code này work trên mọi trình duyệt hiện đại, nên dùng autoprefixer. Tôi không thêm ở đây để code ngắn gọn, dễ đọc. Nếu vào CodePen này bạn lấy được toàn bộ code,包括 prefixed properties.
CSS Animation Resources
- MDN Web Docs: CSS Animation