Using Keyframes Rule

If just smooth transitions aren’t enough to make your UI design come true, you may compose a real animated scene starring your components with the CSS @keyframes rule and the animation property.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along it.

A @keyframes rule consists of the custom name and the set of descriptors for every waypoint of animation. The descriptors use from (equals 0%), to (equals 100%) and/or <percentage value> to define the moment of time to which the rule will apply. Each descriptor contains the property values that are going to change throughout the animation. Its general syntax looks like this:

@keyframes animationName {
  from {
    property: value1;
  }
  50% {
    property: value2;
  }
  to {
    property: value3;
  }
}

The amount of steps between the starting and the ending keyframes and the amount of CSS properties within a keyframe is as much as you need.

CSS Animation Property

After the rule has been declared, you may use its name in the animation property applied to any HTML element.

The animation CSS property applies an animation between styles using the given set of properties.

The animation property is specified as one or more single animations, separated by commas ( , ). In its full notation for one single animation it looks like this:

animation: <duration> <easing function> <delay> <iteration count> <direction> <fill mode> <play state> <@keyframes animation name>;

The property itself is a shorthand for the set of separate CSS properties, which may be used in any combination:

animation-delay

Specifies the amount of time to wait before applying the animation to an element.

animation-direction

Sets whether an animation should play forward, backward, or alternate back and forth between these two options.

animation-duration

Sets the length of time that an animation takes to complete one cycle.

animation-fill-mode

Sets how a CSS animation applies styles to its target before and after its execution.

animation-iteration-count

Sets the number of times an animation sequence should be played before stopping.

animation-name

Specifies the names of one or more @keyframes rules that describe the animation to apply to an element. Multiple @keyframes rules are specified as a comma-separated ( , ) list of names.

If the specified name does not match any @keyframes rule, no properties are animated.

animation-play-state

Sets whether an animation is running or paused.

animation-timing-function

Sets how an animation progresses through the duration of each cycle.

Time values are set in seconds ( s ) or milliseconds ( ms ).

Using CSS Animations

Let’s again consider the scenario with a Timer component from the Applying CSS Transitions to a Component example, but this time try to do something funky using the @keyframes rule and the animation property. 

What could be better than to build a timer into a Timer?

  1. In the UI Builder, add a Timer component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add the base styles to the Element CSS Style property:

position: relative;
display: flex;
justify-content: center;
text-align: center;
width: fit-content;
margin: auto;
padding: 24px 16px;
border-radius: 8px;
overflow: hidden;
transform-origin: center center;
transition: 0.24s;

  1. In the same property, add a pair of yet hidden pseudo-elements to show them only on the scaled up component. One is for the overlay and the other is for the countdown:

::before, ::after {
  content: "";
  display: block;
  position: absolute;
  opacity: 0;
  transition: 0.24s;
}

::before {
  color: white;
  font-size: 12px;
  font-weight: 800;
  z-index: 1;
}

::after {  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: slategray; 
}

  1. Next, still working with the Element CSS Style property, add animation sequences for each of the elements. The first one is for the component itself, it will add a bounce to the scaling animation:

@keyframes scaleup {
  0% {
    transform: scale(1);
    color: transparent;
  }
  25% {
    transform: scale(3.5);
  }
  50% {
    transform: scale(3);
  }
  75% {
    transform: scale(3.2);
  }
  100% {
    transform: scale(3);
    color: transparent;
  }
}

The second one is for the countdown:

@keyframes countdown {
  0% {
    transform: scale(0);
  }
  10% {
    content: "0:01";
    transform: scale(1.5);
    opacity: 1;
  }
  40% {
    content: "0:02";
    transform: scale(2);
  }
  100% {
    content: "0:03";
    transform: scale(3);
    opacity: 1;
  }
}

The last one is for hiding the overlay when the countdown is over:

@keyframes dissapear {
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

  1. Now, it’s time to add styles and the animations for the hover state of each element using the :hover pseudo-class:

:hover {
  transform: scale(3);
  color: firebrick;
  font-weight: 800;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
  animation: scaleup 0.4s ease-out 1;
}

:hover::before {
  animation: countdown 3s linear 1 reverse;
}

:hover::after {
  animation: dissapear 3s linear 1 forwards; 
}

  1. Check the resulting interaction on the dashboard. This particular one may not be very practical in a real application, but makes a good example of what is possible with the keyframes animations.

Was this page helpful?