Retour au cours

Lesson 24: Other Units: Time (s, ms), Angles (deg), and Flex (fr)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

24. Other Units: Time, Angles, and Flex

CSS is not just about dimensions; it also controls time for animations and relative sizing for modern layouts.

Time Units

Used for transitions and animations to define duration and delay.

  1. Seconds (s)
  2. Milliseconds (ms) (1000ms = 1s)

css .animated-button { /* The transition duration is 0.3 seconds */ transition-duration: 0.3s; }

.fast-animation { animation-duration: 500ms; }

Angle Units

Used for rotations (transform: rotate()), gradients, and other directional properties.

  1. Degrees (deg)

css .rotated-box { transform: rotate(45deg); /* Rotates the box 45 degrees clockwise */ }

Fractional Unit (fr) - CSS Grid

Fractional units are exclusive to CSS Grid Layout (Lesson 66+). fr defines a fraction of the available free space in a grid container.

css /* Defines three columns: the first takes 1 unit of space, the second takes 2 units, and the third takes 1 unit. */ .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; }

/* The middle column will be twice as wide as the outer columns. */