Animations

CSS animations are a powerful tool for adding motion and interactivity to a webpage. They allow you to animate various properties of HTML elements, such as position, size, color, and opacity.

Defining keyframes

Animations are defined using keyframes, which specify the intermediate states of an element during the animation. Keyframe rules define the stages of an animation in terms of percent progress. Each rule indicates the value of a given CSS property at that point in the animation.

For example, the following keyframes transition the background and foreground colors between black and white:

module Example.StyleSheet where

import Color (black, white)
import Data.Tuple.Nested ((/\))
import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  keyframes (KeyframesName "black-and-white") ? do
    pct 0 /\ pct 100 ? Rule.do
      backgroundColor := black
      color := white
    pct 50 ? Rule.do
      backgroundColor := white
      color := black

Open with Try PureScript

Creating animation

Animating elements requires at minimum a keyframe animation name and duration, for example:

module Example.StyleSheet where

import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  universal ? Rule.do
    animationName := KeyframesName "black-and-white"
    animationDuration := ms 150

Open with Try PureScript

A range of properties can be used to control animations:

  • animationName specifies the name of the keyframe animation to apply.
  • animationDuration sets the duration of the animation.
  • animationTimingFunction defines the timing curve for the animation (e.g. linear, easeIn, or easeOut).
  • animationDelay adds a delay before the animation starts.
  • animationIterationCount sets the number of times the animation should repeat.
  • animationDirection controls whether the animation should play in the normal or reverse directions, or should alternate (or alternateReverse).
  • animationFillMode specifies how the element should be styled before and after the animation (e.g. none, forwards, backwards or both).

Each of these properties also supports a list of animations by using Tecton's list syntax based on nested tuples, e.g. animationDuration := ms 150 /\ ms 250 /\ ms 75.

Transitions

Keyframe animations provide flexibility and control for complex, multi-step animations. For basic, one-off property changes triggered by events, transitions offer a lightweight approach with no need for a keyframes at-rule. Instead, you simply leverage the following properties:

  • transitionProperty specifies the property to be transitioned.
  • transitionDuration specifies the length of time over which the transition should occur.
  • transitionTimingFunction defines the timing function used for the transition. It determines how intermediate property values are calculated over time.
  • transitionDelay sets a delay before the transition starts.

Like animation properties, each of the transition properties supports a list of values, e.g. transitionProperty := width /\ height /\ padding.

For example, the following rulesets transition the background and foreground colors over a 150-millisecond period on hover:

module Example.StyleSheet where

import Color (black, white)
import Data.Tuple.Nested ((/\))
import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  let transitionDemo = ClassName "transition-demo"
  universal &. transitionDemo ? Rule.do
    transitionProperty := backgroundColor /\ color
    transitionDuration := ms 150
    transitionTimingFunction := ease
    backgroundColor := white
    color := black
  universal &. transitionDemo &: hover ? Rule.do
    backgroundColor := black
    color := white

Open with Try PureScript

See also