Keyframes

CodeSandbox link

You can find the full code for this tutorial at https://codesandbox.io/s/css-keyframes-yuxkc.

What is CSS keyframe?

CSS @Keyframes determine what styles an element will have at a given time. They are responsible for controlling intermediate stages of an animation. A keyframe allows greater control of an animation's progress.

To utilize this property, import keyframes from styled-components. The syntax is provided below:

import styled, { keyframes } from "styled-components"

Keyframe syntax

Keyframes must have a Name that binds the animation to the element. This property has two values, "from" and "to," which determine the style of the animation at the start (0%) and end (100%).

const textfade = keyframes`
  from { 
    opacity: 0; 
    transform: translateY(-10px); 
    }

  to { 
    opacity: 1; 
    transform: translateY(0px); 
    }
`;

Animation name

The animation must be defined in the animation-name property of an element.

const Title = styled.h1`
	animation-name: ${textfade};
	animation-duration: 1s;
`

Multiple control points

You can also use percentages to have more control over the timeline of the animation. As a result, you will be able to control anything in-between like adding new properties at a specific point in the animation.

const textfade = keyframes`
  0% { 
    opacity: 0; 
    transform: translateY(-10px); 
    }

  80% {
    opacity: 0.5;
    transform: translateY(-10px);
  }

  100% { 
    opacity: 1; 
    transform: translateY(0px); 
    }
`;

CSS Animation Properties

Below are the sub-properties of CSS Animation :

• animation-name: Specifies the name of the @Keyframes
• animation-duration: Defines the length of an animation
• animation-delay: Determines the delay for the start of an animation
• animation-iteration-count: Sets how many times to play an animation
• animation-direction: Determines if the animation will be reversed on alternate cycles
• animation-play-state: Indicates whether the animation is running or paused
• animation-timing-function : Sets how an animation progresses through the duration of each cycle

const Title = styled.h1`
	animation-name: textfade;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-iteration-count: 3;
	animation-direction: reverse;
	animation-play-state: paused;
	animation-timing-function: ease-in-out;
`

Shorten the code

Your code will become very bulky if you add animations to every element, as you can see. Let's combine all the values. Values can be arranged in any order except when both delay and duration are used. By using this method you will have fewer lines of code.

const Title = styled.h1`
  animation: ${textfade} 1s 0.1s forwards ease-in-out;
	opacity: 0;
`;

Reusability

The keyframes are also reusable, so you can add them to another element.

const Caption = styled.h2`
  animation: ${textfade} 1s 0.7s forwards ease-in-out;
  opacity: 0;
`;

Multiple animations

You can have multiple animations for a specific element simply by separating the values by a "comma". In the example: you can see how it's exactly done.

const textslide = keyframes`
  0% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(0px);
  }
`;

const Caption = styled.h2`
  animation: ${textfade} 1s 0.7s forwards ease-in-out,
    ${textslide} 1s 0.7s forwards ease-in-out;
  opacity: 0;
`;