Animation

@keyframes - is used to describe animation

  • from & to keywords are used to describe simple gradual animation
  • percents are used to describe more complex animation, where each percent value is a step on a timeline


animation-name

animation-duration - defines time duration for one cycle

  • 100ms - in milliseconds
  • 0.1s - in seconds


animation-timing-function

  • ease - default value. animation starts slowly, speeds up in the middle, and then slows down again in the end
  • ease-out - animation is quick at the beginning, then slows down at the end
  • ease-in - animation is slow at the beginning, then speeds up at the end
  • linear - animation is constant
  • cubic-bezier()
  • e.g. cubic-bezier(0.25, 0.25, 0.75, 0.75)
  • steps(<number of steps>, <direction>)


animation-delay - sets the delay between the time the element is loaded and the beginning of animation

  • -0.117s - negative animation delay starts the animation immediately, as if that amount of time has already gone by


animation-iteration-count - sets the number of times the animation should repeat

  • <number>
  • infinite - repeat indefinitely


animation-direction

  • normal - default value. animation plays forwards, then reset to the beginning state and plays again
  • reverse - animation plays backwards
  • alternate - animation reverses direction each cycle. first iteration plays forwards
  • alternate-reverse - animation reverses direction each cycle. first iteration plays backwards

Hints

there is no straightforward way to use fade-in animation + same fade-in in reverse mode
the reason is that when "reverse" is set, animation doesn't reset. it's percent is 100%, and therefore nothing changes
animation can be reset by re-rendering element with JS, however using transition or second fade-out animation is easier solution to this

animation-fill-mode

  • none - default behaviour
  • forwards - last animation keyframe will be applied to an element after animation finish
  • backwards - first animation keyframe will be applied to an element before animation start
  • both - combination of forwards & backwards


animation-play-state

  • paused
  • running


animation - is a shorthand for all preceding properties

@keyframes showup {
  from {
    transform: translateY(-400px);
  }
  to {
    transform: translateY(0);
  }
}

animation-timeline

Transformation

transform

  • transform doesn't affect the position of nearby elements
  • multiple transforms are possible. comma is not needed. browser applies transforms starting from the end

Transform Functions

rotate()

  • rotate(45deg)


scale()

  • scale(2, 0.5) - increase by two times horizontally, decrease by two times vertically
  • scaleX(-1) - flip an image


skew()

  • skew(10deg, 0)


translate() - move element

  • translate(8px, 24px) - move horizontally & vertically
  • translate(-50%) - move horizontally only. percents refer to element size

most transform functions are shortcuts for functions specific to horizontal & vertical axises. those specific functions use X & Y suffixes. e.g. translateY()

transform-origin - sets the point around which a transformation is applied

  • center - default
  • left center
  • 50px 50px
  • 75% 75% - is nice for arrow (square that has only two borders)


transform-box - defines the layout box to which the transform and transform-origin properties relate

  • content-box
  • border-box

Transition

transition - defines the transition between two states of an element

  • e.g. transition: background-color 2s, color 1.5s;
  • second state can be triggered using pseudo-classes or via JavaScript
  • all - is used to enable transition for all possible properties
  • tricks:
  • setting transition property to :hover enables one way transition
  • this is a shorthand property for:
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Hints

transform & opacity - are preferred properties for the animation since they don't trigger reflow, which is better for performance

  • e.g. "transform: scaleX()" can often be used instead of "width" to animate expansion and contraction
  • browser aims to animate with 60 fps


animated properties - only those properties can be animated, whose values can change gradually

  • e.g. "visibility" property has only 2 values: visible & hidden, therefore the change happens instantly. instead, "opacity" can be used for that purpose
  • flex - can be animated
  • "display: none" cancels all animations, because element is not rendered and accordingly doesn't know about initial value


stagger animation - animation which flows like train, which starts moving

  • to implement "transform: translateY" should be set to each item, but with different delay
  • can be applied for menu

Animate Height

in CSS it is not possible to animate to "auto" value. therefore the following workarounds can be used for "height" animation

  1. animate max-height from 0 to hard-coded big value
    timing will be broken in this case, since max-height value is not equal to real element height
  2. animate scaleY
  3. animate height from 0 to specific value calculated via JS
  4. animate flex property
  5. animate grid-template-rows
    descendant should have overflow: hidden

Naming Hints

slide in - e.g. toast message or drawer sliding in from outside the screen
slide out

fade-in - is used for opacity. e.g. backdrop of modal is gradually showing up
fade-out

bounce-in - for element with jumping effect
bounce-out

expand - e.g. for sidebar
collapse