Aug 13, 2025 · 1 min read · ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 CSS 的 transition 是是兩個狀態之間的動畫過渡效果。但在實際應用中，常常會遇到一些容易忽略的細節與技巧。今天我們就來聊聊那些你可能還不知道的 transition 進階用法。 1. transition 的運作原理：可計算的屬性 transition 是兩個狀態之間的過渡效果，但這個過渡效果只適用於可以計算的數值型屬性。例如，width、height、opacity 等等。所以，像 auto ...
Join discussion
Jun 13, 2025 · 6 min read · Animations are everywhere — from smooth button effects to moving banners and interactive loaders. With CSS, you can create beautiful, engaging animations without a single line of JavaScript. This guide will help both freshers understand from scratch ...
Join discussion
May 6, 2025 · 6 min read · This part covers advanced CSS topics including CSS3, pseudo-classes, pseudo-elements, complex selectors, transforms, animations, and real-world layout techniques. These questions are non-repetitive, connected, and match real interview patterns. Answe...
Join discussionApr 16, 2025 · 8 min read · To create a transition effect, you must specify two things: the CSS property you want to add an effect to the duration of the effect (If the duration part is not specified, the transition will have no effect, because the default value is 0). ...
Join discussionApr 10, 2025 · 3 min read · 🧠 Part 1: CSS Transitions — Smooth State Changes 🔹 What is a Transition? A transition allows CSS properties to change over time, creating smooth motion instead of an instant switch. ✅ Basic Syntax: selector { transition: property duration timing-...
Join discussionJan 7, 2025 · 3 min read · CSS pseudo-classes and pseudo-elements are advanced selectors that allow you to style specific parts or states of elements without modifying the HTML structure. In this guide, we'll dive deep into these concepts, with examples and a complete UI examp...
Join discussionSep 26, 2024 · 3 min read · CSS transitions enable smooth changes to CSS property values over a specified duration, rather than having the changes happen instantly. This allows for more dynamic and visually appealing animations on a webpage. Basic Syntax of CSS Transitions The ...
Join discussionAug 8, 2024 · 14 min read · https://youtu.be/1VsMKz4Zweg 💡 UPDATE, September 12, 2024: In the earlier version of this article, calc-size was used with a single argument, like this: calc-size(auto). This is no longer supported; calc-size() works only as a two-argument form, ...
FSSPFr and 2 more commented
Jul 20, 2024 · 3 min read · Introduction CSS animations and transitions are powerful tools that can bring your web pages to life. They allow you to create smooth, engaging, visually appealing effects that enhance the user experience. Whether you're looking to add simple transit...
Join discussion
May 31, 2024 · 2 min read · CSS Transform The CSS transform property allows you to perform 2D and 3D transformations on an element. This includes moving, scaling, rotating, skewing, and more. 2D Transforms Translate The translate() function moves an element from its current pos...
Join discussion