Bramus on web.dev

Trigonometric functions in CSS

2023-03-08T00:00:00Z

Trigonometric functions #

In CSS it’s possible to write mathematical expressions. At the base sits the calc() function to do calculations, but most likely you’ve also heard of min(), max(), and clamp() as well.

Joining these functions in Chrome 111 are the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2(). These functions are defined in the CSS Values and Units Module Level 4 and are available in all browsers.

Browser support

Chrome 111, Supported 111
Firefox 108, Supported 108
Edge 111, Supported 111
Safari 15.4, Supported 15.4

Source

`sin()`, `cos()`, and `tan()` #

The core three “trig functions” are:

cos(): Returns the cosine of an angle, which is a value between -1 and 1.
sin(): Returns the sine of an angle, which is a value between -1 and 1.
tan(): Returns the tangent of an angle, which is a value between −∞ and +∞.

Unlike their JavaScript counterparts, these functions accept both angles and radians as their argument.

In the demo below, these functions are used to draw the lines that make up the triangle surrounding the set --angle:

The “hypotenuse” (yellow line) is a line from the center of the circle to the position of the dot. Its length is equal to the --radius of the circle.
The “adjacent” (red line) is a line from the center of the circle along the X-axis. Its length is equal to the --radius multiplied by the cosine of the --angle.
The “opposite” (blue line) is a line from the center of the circle along the Y-axis. Its length is equal to the --radius multiplied by the sine of the --angle.
The tan() function of the --angle is used to draw the green line from the dot towards the X-axis.

See the Pen Pen NWLxROo by web-dot-dev on Codepen

`asin()`, `acos()`, `atan()`, and `atan2()` #

The “arc” or “inverse” counterparts to sin(), cos(), and tan() are asin(), acos(), and atan() respectively. These functions do the calculation in the opposite direction: they take a numeric value as their argument and return the corresponding angle for it.

Finally there’s atan2() which accepts two arguments A and B. The function returns the angle between the positive X-axis and the point (B,A).

Examples #

There are various use-cases for these functions. What follows is a small selection.

Move items on a circular path around a central point #

In the demo below, the dots revolve around a central point. Instead of rotating each dot around its own center and then moving it outwards, each dot is translated on the X and Y axes. The distances on the X and Y axes are determined by taking the cos() and, respectively, the sin() of the --angle into account.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

See the Pen Pen ExePgOg by web-dot-dev on Codepen

To distribute the dots evenly around the central point, each dot is given an additional offset based on its nth-child index. For example, if there are three dots, there’s a distance of 120deg (= 360deg / 3) between each dot.

The first child element out of three gets offset by 0 x 120deg = 0deg.
The second child element out of three gets offset by 1 x 120deg = 120deg.
The third child element out of three gets offset by 2 x 120deg = 240deg.

Rotate an element to face its origin #

The atan2() function calculates the relative angle from one point to another. The function accepts two comma-separated values as its parameters: the y and x position of the other point, relative to the originating point which sits at origin 0,0.

With the calculated value it’s possible to rotate elements so that they face each other, by using the Individual Transform Properties.

In the example below, the boxes are rotated so that they face the location of the mouse. The mouse position is synced to a custom property through JavaScript.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

See the Pen Pen dyqGpQV by web-dot-dev on Codepen

Community highlight #

As demonstrated in this Animated Möbius strip by Ana Tudor, cos() and sin() can be used for more than just translations. Here their outcome is used to manipulate the the s and l components of the hsl() color function.

See the Pen Pen wvybyMo by thebabydino on Codepen

Cover photo by Tamanna Rumee on Unsplash

The large, small, and dynamic viewport units

2022-11-29T00:00:00Z

The viewport and its units #

To size something as tall as the viewport, you can use the vw and vh units.

vw = 1% of the width of the viewport size.
vh = 1% of the height of the viewport size.

Give an element a width of 100vw and a height of 100vh, and it will cover the viewport entirely.

A light blue element set to be 100vw by 100vh, covering the entire viewport.
The viewport itself is indicated using a blue dashed border.

The vw and vh units landed in browsers with these additional units

vi = 1% of the size of the viewport’s inline axis.
vb = 1% of the size of the viewport’s block axis.
vmin = the smaller of vw or vh.
vmax = the larger of vw or vh.

These units have good browser support.

Browser support

Chrome 20, Supported 20
Firefox 19, Supported 19
Edge 12, Supported 12
Safari 6, Supported 6

The need for new viewport units #

While the existing units work well on desktop, it’s a different story on mobile devices. There, the viewport size is influenced by the presence or absence of dynamic toolbars. These are user interfaces such as address bars and tab bars.

Although the viewport size can change, the vw and vh sizes do not. As a result, elements sized to be 100vh tall will bleed out of the viewport.

100vh on mobile is too tall on load.

When scrolling down these dynamic toolbars will retract. In this state, elements sized to be 100vh tall will cover the entire viewport.

100vh on mobile is “correct” when the User-Agent user interfaces are retracted.

To solve this problem, the various states of the viewport have been specified at the CSS Working Group.

Large viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
Small Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.

Visualizations of the large and small viewports.

The new viewports also have units assigned to them:

Units representing the large viewport have the lv prefix. The units are lvw, lvh, lvi, lvb, lvmin, and lvmax.
Units representing the small viewport have the sv prefix. The units are svw, svh, svi, svb, svmin, and svmax.

The sizes of these viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.

Two mobile browser visualizations positioned next to each other.
One has an element sized to be 100svh and the other 100lvh.

In addition to the large and small viewports, there‘s also a dynamic viewport which has dynamic consideration of the UA UI:

When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

Its accompanied units have the dv prefix: dvw, dvh, dvi, dvb, dvmin, and dvmax. Their sizes are clamped between their lv* and sv* counterparts.

100dvh adapts itself to be either the large or small viewport size.

These units ship in Chrome 108, joining Safari and Firefox which already have support.

Browser support

Chrome 108, Supported 108
Firefox 101, Supported 101
Edge 108, Supported 108
Safari 15.4, Supported 15.4

Caveats #

There‘s a few caveats to know about Viewport Units:

None of the viewport units take the size of scrollbars into account. On systems that have classic scrollbars enabled, an element sized to 100vw will therefore be a little bit too wide. This is as per specification.
The values for the dynamic viewport do not update at 60fps. In all browsers updating is throttled as the UA UI expands or retracts. Some browsers even debounce updating entirely depending on the gesture (a slow scroll versus a swipe) used.
The on-screen keyboard (also known as the virtual keyboard) is not considered part of the UA UI. Therefore it does not affect the size of the viewport units. In Chrome you can opt-in to a behavior where the presence of the virtual keyboard does affect the viewport units.

Additional resources #

To learn more about viewports and these units check out this episode of HTTP 203. In it, Bramus tells Jake all about the various viewports and explains how exactly the sizes of these units are determined.

Additional reading material:

CSS Animated Grid Layouts

2022-10-25T00:00:00Z

Browser support

Chrome 107, Supported 107
Firefox 66, Supported 66
Edge 107, Supported 107
Safari 16, Supported 16

Value Interpolation in CSS #

In CSS you can smoothly transition properties from one value to the other using the transition property.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

The rendering engine will automatically detect the type of the targeted property’s value, and use that information to smoothly transition to the new value.

For example:

Transitioning opacity from 0 to 1? That’s a numerical interpolation.
Transitioning background-color from white to black? Fade between the source and target colors.
Transitioning width? Interpolate numerically, converting units along the way if needed.

The same applies to CSS animations, where the browser will do value interpolation between keyframes.

Interpolating `grid-template-columns` and `grid-template-rows` #

Thanks to our contributors at Microsoft, Chrome–as of version 107–is able to interpolate grid-template-columns and grid-template-rows values.

Grid layouts can smoothly transition between states, instead of snapping at the halfway point of an animation or transition.

In the demo below a grid is showing several avatars. To conserve space, the avatars are laid out on top of each other by limiting the width of each column using grid-template-columns. On hover, each column is given more space.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

With the transition property in place, the grid smoothly interpolates between values.

See the Pen Pen XWqVowx by web-dot-dev on Codepen

The effect also applies to animations that change the grid-template-columns or grid-template-rows values.

See the Pen Pen jOxRdzw by web-dot-dev on Codepen

Photo by Ernest Ojeh on Unsplash

Finer grained control over CSS transforms with individual transform properties

2022-08-02T00:00:00Z

The CSS `transform` property #

To apply transforms to an element, use the CSS transform Property. The property accepts one or more <transform-function>s which get applied one after the other.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

The targeted element is translated by 50% on the X-axis, rotated by 30 degrees, and finally scaled up to 120%.

While the transform property does its work just fine, it becomes a bit tedious when you want to alter any of those values individually.

To change the scale on hover, you must duplicate all functions in the transform property, even though their values remain unchanged.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

The individual transform properties #

Shipping with Chrome 104 are individual properties for CSS transforms. The properties are scale, rotate, and translate, which you can use to individually define those parts of a transformation.

By doing so, Chrome joins Firefox and Safari which already support these properties.

Browser support

Chrome 104, Supported 104
Firefox 72, Supported 72
Edge 104, Supported 104
Safari 14.1, Supported 14.1

Source

Rewriting the preceding transform example with the individual properties, your snippet becomes this:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Order matters #

One key difference between the original CSS transform property and the new properties is the order in which the declared transformations get applied.

With transform, the transformation functions get applied in the order they’re written–from left (outside) to right (inside).

With the individual transformation properties, the order is not the order in which they are declared. The order is always the same: first translate (outside), then rotate, and then scale (inside).

That means both of the following code snippets give the same result:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

In both cases the targeted elements will first be translated by 50% on the X-axis, then rotated by 30deg, and finally scaled by 1.2.

If one of the individual transform properties are declared along with a transform property, then the individual transforms get applied first (translate, rotate, and then scale) with the transform last (inside). More details are in the spec that defines how the transformation matrix should be calculated.

Animations #

The main reason these properties were added is to make animations easier. Say you want to animate an element as follows:

Using `transform` #

To implement this animation using transform, you’d have to calculate all in-between values for all defined transformations, and include those in each keyframe. For example, to do a rotation at the 10% mark, the values for the other transformations must be calculated as well, because the transform property needs all of them.

The resulting CSS code becomes this:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

See the Pen Pen gOeRMZV by web-dot-dev on Codepen

Using individual transform properties #

With individual transform properties this becomes much easier to write. Instead of dragging all transformations from keyframe to keyframe, you can target each transform individually. You also no longer need to calculate all those in-between values.

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

See the Pen Pen NWYgrox by web-dot-dev on Codepen

Using individual transform properties and several keyframes #

To make your code modular you can split up each sub-animation into its own set of keyframes.

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

See the Pen Pen poLwbGR by web-dot-dev on Codepen

Thanks to this split you can apply each separate set of keyframes as you like because the transform properties–which now have become individual properties–no longer overwrite each other. Above that you can give each transformation a different timing without needing to rewrite the whole lot.

Performance #

Animations using these new properties are just as efficient as animations of the existing transform property.

Animations of translate, rotate, and scale run on the compositor the same way that animations of transform do, so they’re good for animation performance in the same way that transform is.

These new properties also work with the will-change property. In general, it’s best to avoid overusing will-change by using it on the minimum number of elements needed, and for as short an amount of time as reasonably possible. But it’s also good to be as specific as possible. For example, if you’re using will-change to optimize an animation with the rotate and filter properties, you should declare this using will-change: rotate, filter. This is slightly better than using will-change: transform, filter in a case where you’re animating rotate and filter, because some of the data structures that Chrome creates in advance when you use will-change are different for transform versus rotate.

CSS border animations

2022-08-01T00:00:00Z

Setting borders #

There are a few methods available to set a border on an element: border, outline, and box-shadow. As detailed in The 3 CSS Methods for Adding Element Borders by Stephanie Eckles, each approach comes with its own advantages and disadvantages–especially when it comes to animating the borders. The main reason to not use a proper CSS border is for animation purposes.

See the Pen Pen LYRBxQQ by kevinpowell on Codepen

Border Animations using outline-offset by Kevin J. Powell

An article that recently caught my attention is Fantastic CSS border animation, where author Coco explored more options. By injecting generated content using ::before and ::after they create a faux border which is then animated.

What stands out the most to me are the supporting animated visualizations used in the article. They really help explain what exactly is being done to achieve the desired effect.

See the Pen Pen YzGdEMZ by Chokcoco on Codepen

Border Animations using generated content by Coco

Both the white layer and colored lines are generated content. By fading the white layer in and out, it becomes clear how they stack and how the animation works.

Retaining the box model #

A disadvantage of using Generated Content to imitate a border is that you end up with a broken box model: the content can now obscure the faux border because said “border” is painted underneath. To mitigate, you have to apply the desired border-width as the padding.

To have a true border–and thus retain the workings of the box model–you can use multiple backgrounds which you then stretch out into the border area.

The basics #

Let’s start by creating a dotted border and adding the multiple backgrounds.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

See the Pen Pen dymZzyZ by web-dot-dev on Codepen

Sizing the backgrounds with `background-origin` #

As you can see there is something funny going on with the backgrounds here: they are painted into the border, but the conic-gradient seems to be all wrong. This is actually intended behavior: by default background images do not draw into the border as their origin is the padding-box of the element. To create a border after all, the set background images are repeated in the border itself, yielding the weird visual effect.

To solve this problem, you need to stretch out the background so it also occupies the size of the border. You could do this manually by stretching and repositioning the background, but best is to use the background-origin property to size the background against the border-box.

Browser support

Chrome 1, Supported 1
Firefox 4, Supported 4
Edge 12, Supported 12
Safari 3, Supported 3

Source

Don't

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

background-origin: border-box;

This one addition makes everything look much better:

See the Pen Pen MWVOvYa by web-dot-dev on Codepen

Shrinking the white background layer with `background-clip` #

With the backgrounds taking up all the space now, the semi-transparent layer needs to be shrunk down again. Instead of fiddling with background-size again, there is an easier way to do so: use background-clip and set it to padding-box. That way the background is no longer drawn underneath the area of the border.

Browser support

Chrome 1, Supported 1
Firefox 4, Supported 4
Edge 12, Supported 12
Safari 5, Supported 5

Source

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

See the Pen Pen JjLOyoJ by web-dot-dev on Codepen

Finally, make the border transparent to have the full effect.

border: 0.3rem dotted transparent;

See the Pen Pen mdxqMyj by web-dot-dev on Codepen

Animation #

To restore animation of the border, you can manipulate the start angle of the conic-gradient.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

Thanks to @property this becomes a breeze in browsers that support it:

Browser support

Chrome 85, Supported 85
Firefox, Not supported
Edge 85, Supported 85
Safari 16.4, Supported 16.4

Source

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

All combined, the code becomes this:

See the Pen Pen BarmdyM by web-dot-dev on Codepen

Bonus Content: `border-image` #

A previously covered approach to draw a gradient border is to use CSS border-image.

Browser support

Chrome 16, Supported 16
Firefox 15, Supported 15
Edge 12, Supported 12
Safari 6, Supported 6

Source

It allows for more simplified code as you do not need to deal with overlapping backgrounds. Animation can be applied in the same manner as before.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

See the Pen Pen oNqoeXo by web-dot-dev on Codepen

However, you’ll notice a few things no longer work with this approach:

The border-image does not follow the border-radius; it will always remain rectangular.
When setting border-image-slice to fill, the border-image is not painted underneath the set background but on top. This can be troublesome if you want the background to be semi-transparent.

In closing #

There’s a multitude of possibilities to animate borders in CSS. Depending on the use-case, you might lean into one or the other.

Bramus on web.dev

Trigonometric functions in CSS

Trigonometric functions #

sin(), cos(), and tan() #

asin(), acos(), atan(), and atan2() #

Examples #

Move items on a circular path around a central point #

Rotate an element to face its origin #

Community highlight #

The large, small, and dynamic viewport units

The viewport and its units #

The need for new viewport units #

Caveats #

Additional resources #

CSS Animated Grid Layouts

Value Interpolation in CSS #

Interpolating grid-template-columns and grid-template-rows #

Finer grained control over CSS transforms with individual transform properties

The CSS transform property #

The individual transform properties #

Order matters #

Animations #

Using transform #

Using individual transform properties #

Using individual transform properties and several keyframes #

Performance #

CSS border animations

Setting borders #

Retaining the box model #

The basics #

Sizing the backgrounds with background-origin #

Shrinking the white background layer with background-clip #

Animation #

Bonus Content: border-image #

In closing #

`sin()`, `cos()`, and `tan()` #

`asin()`, `acos()`, `atan()`, and `atan2()` #

Interpolating `grid-template-columns` and `grid-template-rows` #

The CSS `transform` property #

Using `transform` #

Sizing the backgrounds with `background-origin` #

Shrinking the white background layer with `background-clip` #

Bonus Content: `border-image` #