Skip to content

Latest commit

 

History

History
174 lines (146 loc) · 8.43 KB

CSS_animation.md

File metadata and controls

174 lines (146 loc) · 8.43 KB

CSS Animation:

Table of contents

Introduction

Components of CSS Animations

Using An Animation

Summary

References and Links

Introduction

Native CSS has built in animation functionality which can be used to implement web page animations (i.e. on HTML elements) without the use of JavaScript. There are three key advantages to using CSS animation rather than traditional script-driven animation techniques:

  1. They easy to use for simple animation; does not require knowledge of JavaScript
  2. CSS animations run well even under moderate system load (simple animations can still perform poorly in JavaScript under a similar load)
  3. CSS animations are controlled by the browser, allowing the browser to optimize performance and efficiency (ex. the browser may reduce the update frequency of animations running tabs that are not currently visible)

At its essence, CSS animations are transitions, and we can describe them as a 'change from one CSS style to another over the dimension of time'.

Components of CSS Animations

There are two main parts to CSS Animation:

  1. 'animation' properties: these are CSS element properties that allow you to style the animation of that given element
  2. '@keyframes' rules: allow you to define animations

'animation' properties

To configure an animation for an HTML element, we must style that element with the 'animation' property or its sub-properties. All this does is allow you to configure the timing, duration, and other details about how the 'animation sequence' (i.e. @keyframes) will progress. This does not configure the appearance of the animation, this is specified using '@keyframes' rules, which we'll touch upon later.

'animation' sub-properties:

  • animation-composition:
    • Specifies how the styles of an element should be combined with styles of its descendants during the animation.
  • animation-delay:
    • Sets the delay before an animation starts, allowing you to control when an animation begins after it is triggered.
  • animation-direction:
    • Defines whether the animation should play in a forward, backward, or alternate direction.
  • animation-duration:
    • Sets the total duration of an animation, indicating how long it takes to complete one cycle.
  • animation-fill-mode:
    • Determines how the styles are applied to an element before and after the animation, including options like filling backwards or forwards.
  • animation-iteration-count:
    • Specifies the number of times an animation cycle should be played before stopping.
  • animation-name:
    • Assigns a name to the animation, referencing a keyframe rule that defines the styles for each animation state.
  • animation-play-state:
    • Controls whether an animation is running or paused, providing dynamic control over the animation's playback.
  • animation-timeline:
    • Determines the timeline to which the animation belongs, allowing synchronization with other animations.
  • animation-timing-function:
    • Defines the acceleration curve for an animation, specifying how the intermediate values are calculated over the duration of the animation.

The 'animation' property itself encompasses the above sub-properties and can be used as shorthand to declare all the above properties in one statement (more on this after)

Link to learn more about 'animation' and its sub-properties:

Using 'animation' and its sub-properties:

There are two ways to set an the CSS animation style of an HTML element:

  • Using 'animation' property directly (shorthand):
p {
  animation: 3s infinite alternate slidein;
}

this was is useful for saving space

  • Using and setting the sub-properties individually:
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

'@keyframes' rules

When we define an '@keyframes' rule we are essentially defining a transition between CSS element style properties. In other words we are defining an animation.

Here's an example:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

There are two types of keywords called "keyframes" (don't get this mistaken with '@keywords' as a rule, which means the animation itself) we can use to determine how the transition will behave and when CSS style changes will occur over time:

  1. Percentage keyframes: Defining percentage keyframes in CSS animation '@keyframes' rules is like placing markers that signify when a change should take place, relative to the percentage of the animation that has been completed. For instance, CSS styles within a 25% keyframe will activate when the animation reaches the 25% progress mark:
@keyframes slidein {
  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }
}
  1. 'from' and 'to' keyframes: 'from' essentially means at the beginning of the animation, and 'to' means at the end of the animation. Following the logic of how percentage keyframes work, we see that the style set in keyframe 'from' will take effect once the animation is 0% complete, and the style set in keyframe 'to' will take effect once the animation is 100% complete. Here's an example of it in code:
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
  1. combine both 'from' and 'to' and percentage keyframes:
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Using An Animation

If we want to an HTML element to use an animation (i.e. @keyframes rule) we've declared, we must 'bind' that animation to the HTML element. When we 'bind' an animation to an HTML element, we mean we are setting the HTML 'animation-name' sub-property to the name of the '@keyframes' rule/animation we want that HTML element to display (or declaring the name in the 'animation' property if we're using shorthand). In other words, we are associated a '@keyframes' rule/animation to an HTML element. There are two ways to do this depending on if you're using 'animation' property shorthand or sub-properties:

  1. 'animation' property:
p {
  animation: 3s infinite alternate <name of animation>;
}
  1. sub-properties:
p {
  animation-duration: 3s;
  animation-name: <name of animation>;
}

If the above is not clear, here is a page full of great examples of CSS animation with code to accompany the examples: https://chartscss.org/customization/animations/

Summary

Summarizing everything we've covered so far:

  • Animations are defined using '@keyframes' rules which define the CSS style changes that occur and how the animation will look(ex. background-color: black to background-color: red)
  • In '@keyframes' rules we set keyframes using either 'from' or 'to' keyframes, or percentage keyframes (each keyframe represents CSS style values at that particular part of the animation)
  • In each specific HTML element, we define how the animation 'binded' to that element will behave
  • We configure the 'binded' animations behaviour through using 'animation' property or its various sub-properties (ex. animation-duration: 3s;)

Here's a short YouTube video that summarizes what we've learned in a visual, infographic way: https://www.youtube.com/watch?v=HZHHBwzmJLk

References and Links