8 Surprising Effects You Can Create with Text Animations in CSS
Home
8 Surprising Effects You Can Create with Text Animations in CSS
Coding

8 Surprising Effects You Can Create with Text Animations in CSS

Aaquib Ahmed
Aaquib Ahmed
3/5/2023
.
14 min read

CSS animations are a powerful tool for creating engaging and dynamic websites. One particularly exciting use of CSS animations is creating surprising and visually striking effects with text. With some CSS know-how and creativity, you can create stunning text animations that will keep your users engaged and entertained. In this blog post, we’ll showcase 8 surprising effects you can create with text animations in CSS, from spinning text to pulsating letters. So let’s dive in and explore the possibilities of CSS text animations!

Get Started

To prepare for CSS animations, it’s essential to familiarize yourself with a crucial CSS property and a straightforward HTML and CSS template. Let’s explore these first before diving into CSS animations.

var()

The ‘var’ function is a tool used to insert the value of a CSS variable, enabling you to create variables with either global or local scope. Global variables can be accessed throughout the document, while local variables are limited to the selector in which they are declared.

Syntax

var(--name, value)
  • name – variable name (must start with two dashes)
  • value – optional

Example

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--white); }

Also read, Programming Languages used at FAANG/ FAAMG

Now you know about the var function, let us dive into our topic, 

HTML Template

This is a simple HTML template that you can use to implement different types of text animations,

<ul class="text-container">
  <li style="--i: 1;">A</li>
  <li style="--i: 1.3;">N</li>
  <li style="--i: 1.6;">I</li>
  <li style="--i: 1.9;">M</li>
  <li style="--i: 2.2;">A</li>
  <li style="--i: 2.5;">T</li>
  <li style="--i: 2.8;">I</li>
  <li style="--i: 3.1;">O</li>
  <li style="--i: 3.4;">N</li>
</ul>

As you can see, We’ve used a ‘ul’ element and nested ‘li’ elements inside, one for each element. Additionally, each ‘li’ element has been assigned a variable named ‘i’ with distinct values

CSS Template

We will also add a simple CSS template which is the same for all the rest of the text animation,

.text-container {
    display: flex;
    justify-content: center;
    font-size: 3rem;
    list-style-type: none;
    display: flex;
    gap: 20px;
}

In the CSS template, we just style our text container and set it with font size and align them into the center using flexbox and remove the default list style.

Also read, Simple steps to Increase your Website’s Web Performance

Text Animation 1

In our first text animations, we will use CSS animation property where with the help of calc and var functions, we will set the animation duration.

  • The CSS code defines an animation called “bubbly”.
  • The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  • The “forwards” value for animation-fill-mode means that the styles defined in the final keyframe (100%) will be applied to the element after the animation ends.
  • The animation timing function is set to “ease-in-out”, which means that the animation will start slowly, speed up in the middle, and slow down again at the end.
  • The keyframes for the “bubbly” animation are defined using the @keyframes rule.
  • The animation starts with the element being invisible (opacity: 0) and very small (transform: scale(0)).
  • At the 70% point of the animation, the element becomes visible (opacity: 1) and grows to 1.5 times its original size (transform: scale(1.5)).
  • The animation ends with the element at its normal size and fully visible (opacity: 1, transform: scale(1)).
  • There are two commented-out lines in the keyframes section that use translateY to move the element up and down. These lines are not currently active in the animation.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: bubbly;
  animation-duration: calc(var(--i) * 1s);
   animation-fill-mode:forwards;
  animation-timing-function:ease-in-out
}

/* keyframes */
@keyframes bubbly {
  0% {
    opacity: 0;
    /* transform: translateY(-100px); */
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    /* transform: translateY(0); */
    transform: scale(1);
  }
}

Demo

Also read, 5 Amazing cmd tricks to impress your friends

Text Animation 2

  1. This code targets a list item (li) element in an HTML document.
  2. The CSS code defines an animation called “falling”.
  3. The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  4. The keyframes for the “falling” animation are defined using the @keyframes rule.
  5. The animation starts with the element being invisible (opacity: 0) and positioned 100 pixels above its original position (transform: translateY(-100px)).
  6. At the 70% point of the animation, the element becomes fully visible (opacity: 1).
  7. The animation ends with the element in its original position (transform: translateY(0)) and fully visible (opacity: 1).
  8. There are no timing functions specified, so the animation will use the default timing function of “ease”.
  9. This animation does not use animation-fill-mode, so the styles defined in the final keyframe (100%) will not be applied to the element after the animation ends. Instead, the element will revert to its original state.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: falling;
  animation-duration: calc(var(--i) * 1s);
}

/* keyframes */
@keyframes falling {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Demo

Also read, How to make money through coding as a teenager?

Text Animation 3

  1. This code targets a list item (li) element in an HTML document.
  2. The CSS code defines an animation called “rotating”.
  3. The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  4. The keyframes for the “rotating” animation are defined using the @keyframes rule.
  5. The animation starts with the element being invisible (opacity: 0) and not rotated (transform: rotateX(0deg)).
  6. At the 100% point of the animation, the element becomes fully visible (opacity: 1) and rotates 720 degrees around the X-axis (transform: rotateX(720deg)). This causes the element to spin twice before the animation ends.
  7. There are no timing functions specified, so the animation will use the default timing function of “ease”.
  8. This animation does not use animation-fill-mode, so the styles defined in the final keyframe (100%) will not be applied to the element after the animation ends. Instead, the element will revert to its original state.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
  li {
    animation-name: rotating;
    animation-duration: calc(var(--i) * 1s);
  }

  /* keyframes */
  @keyframes rotating {
    0% {
      opacity: 0;
      transform: rotateX(0deg);
    }

    100% {
      opacity: 1;
      transform: rotateX(720deg);
    }
  }

Demo

Also read, Implement Star Rating Widget using HTML, CSS and JavaScript | The DOM Challenge

Text Animation 4

  1. This code targets a list item (li) element in an HTML document.
  2. The CSS code defines an animation called “gradient”.
  3. The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  4. The animation-fill-mode property is set to “forwards”, which means that the element will retain the styles defined in the final keyframe (100%) after the animation ends.
  5. The keyframes for the “gradient” animation are defined using the @keyframes rule.
  6. At the 0% point of the animation, the text color of the element is black.
  7. At the 40% point of the animation, the text color of the element transitions to cyan.
  8. At the 70% point of the animation, the text color of the element transitions to violet.
  9. At the 100% point of the animation, the text color of the element transitions to magenta.
  10. There are no timing functions specified, so the animation will use the default timing function of “ease”.
  11. Since animation-fill-mode is set to “forwards”, the text color of the element will remain magenta even after the animation ends.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
  li {
    animation-name: gradient;
    animation-duration: calc(var(--i) * 1s);
    animation-fill-mode: forwards;
  }

  @keyframes gradient {
    0% {
      color: black;
    }
    40% {
      color: cyan;
    }
    70% {
      color: violet;
    }
    100% {
      color: magenta;
    }
  }

Demo

Also read, Implement Pixel Art grid using HTML, CSS and JavaScript | The DOM Challenge

Text Animation 5

  1. This code targets a list item (li) element in an HTML document.
  2. The CSS code defines an animation called “lowerCase”.
  3. The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  4. The animation-fill-mode property is set to “forwards”, which means that the element will retain the styles defined in the final keyframe (100%) after the animation ends.
  5. The animation-timing-function property is set to “linear”, which means that the animation will progress at a constant rate.
  6. The keyframes for the “lowerCase” animation are defined using the @keyframes rule.
  7. At the 80% point of the animation, the text of the element transitions to lowercase using the text-transform property.
  8. At the 100% point of the animation, the text of the element transitions to uppercase using the text-transform property.
  9. Since animation-fill-mode is set to “forwards”, the text of the element will remain uppercase even after the animation ends.
  10. The timing function for this animation is set to “linear”, which means that the animation will progress at a constant rate. In other words, there will be no acceleration or deceleration in the animation.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
  li {
    animation-name: lowerCase;
    animation-duration: calc(var(--i) * 1s);
    animation-fill-mode: forwards;
    animation-timing-function: linear;
  }
  @keyframes lowerCase {
    80% {
      text-transform: lowercase;
    }
    100% {
      text-transform: uppercase;
    }
  }

Demo

Also read, 15 Useful GitHub Repositories Every Developer Should Bookmark

Text Animation 6

  1. This code targets a list item (li) element in an HTML document.
  2. The CSS code defines an animation called “fadeLeft”.
  3. The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  4. The animation-fill-mode property is set to “forwards”, which means that the element will retain the styles defined in the final keyframe (100%) after the animation ends.
  5. The animation-timing-function property is set to “ease-in-out”, which means that the animation will start slowly, speed up in the middle, and then slow down again towards the end.
  6. The keyframes for the “fadeLeft” animation are defined using the @keyframes rule.
  7. At the 10% point of the animation, the element is translated to the left by 200 pixels (using transform: translateX) and its opacity is set to 0, making it invisible.
  8. Between the 10% and 60% points of the animation, the element’s opacity remains at 0 while it continues to move to the right, also by 200 pixels.
  9. At the 100% point of the animation, the element’s opacity is set to 1, making it visible again, and it is returned to its original position using transform: translateX(0).
  10. Since animation-fill-mode is set to “forwards”, the element will remain in its final position and opacity even after the animation ends.
  11. The timing function for this animation is set to “ease-in-out”, which provides a smooth transition as the element moves and fades in and out of view.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
  li {
    animation-name: fadeLeft;
    animation-duration: calc(var(--i) * 1s);
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }

  @keyframes fadeLeft {
    10% {
      transform: translateX(-200px);
      opacity: 0;
    }

    60% {
      opacity: 0;
      transform: translateX(200px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

Demo

Also read, 10 Crazy Useful Google Chrome Extensions for a Developer you Need to Have!

Text Animation 7

  1. This code targets a list item (li) element in an HTML document.
  2. The CSS code defines an animation called “flipY”.
  3. The animation has a duration that is calculated based on the value of a custom property called “–i”. This custom property must be set elsewhere in the CSS or HTML.
  4. The animation-fill-mode property is set to “forwards”, which means that the element will retain the styles defined in the final keyframe (100%) after the animation ends.
  5. The animation-timing-function property is set to “ease-in-out”, which means that the animation will start slowly, speed up in the middle, and then slow down again towards the end.
  6. The keyframes for the “flipY” animation are defined using the @keyframes rule.
  7. At the 0% point of the animation, the element is rotated 360 degrees around the Y-axis using transform: rotateY, making it appear upside down.
  8. At the 100% point of the animation, the element is rotated back to its original position using transform: rotateY(0deg), making it right-side up again.
  9. Since animation-fill-mode is set to “forwards”, the element will remain in its final position and rotation even after the animation ends.
  10. The timing function for this animation is set to “ease-in-out”, which provides a smooth transition as the element flips around the Y-axis.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
  li {
    animation-name: flipY;
    animation-duration: calc(var(--i) * 1s);
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }

  @keyframes flipY {
    0% {
      transform: RotateY(360deg);
    }
    100% {
      transform: rotateY(0deg);
    }
  }

Demo

Also read, Chatbots Are Breaking Bad with Messed-Up Responses

Text Animation 8

This CSS code applies animations to a list of elements (presumably li elements) in a specific order. Here’s a breakdown of what each part does:

  1. li: This selects all li elements on the page to apply the animations to.
  2. animation-duration: This specifies the duration of the animation, which is calculated based on the index of the element being animated (var(--i) is used to represent this value).
  3. animation-fill-mode: This determines what styles are applied to the element after the animation is complete. In this case, it is set to forwards, which means the element retains the styles applied to it by the animation.
  4. animation-timing-function: This specifies the speed curve of the animation, with ease-in-out being used here.
  5. li:nth-child(n): This targets specific li elements based on their position in the list. :nth-child(1) selects the first li element, :nth-child(2) selects the second, and so on.
  6. animation-name: This specifies the name of the keyframe animation to apply to the targeted element(s).
  7. @keyframes: This defines the keyframe animation, with slideLeft, slideRight, slideTop, and slideBottom being defined here.

    The slideLeft, slideRight, slideTop, and slideBottom animations all have the same basic structure: they start with opacity: 0 and a transform property that moves the element off-screen, and end with opacity: 1 and a transform property that returns the element to its original position. The slideLeft and slideRight animations move the element horizontally, while slideTop and slideBottom move it vertically. The animation-timing-function property is set to linear for all of these animations, meaning the movement is constant throughout the animation.

Code

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
  li {
    animation-duration: calc(var(--i) * 1s);
    animation-fill-mode: forwards;
    animation-timing-function: linear;
  }

  li:nth-child(1) {
    animation-name: slideLeft;
  }
  li:nth-child(2) {
    animation-name: slideTop;
  }
  li:nth-child(3) {
    animation-name: slideRight;
  }
  li:nth-child(4) {
    animation-name: slideLeft;
  }
  li:nth-child(5) {
    animation-name: slideBottom;
  }
  li:nth-child(6) {
    animation-name: slideRight;
  }
  li:nth-child(7) {
    animation-name: slideLeft;
  }
  li:nth-child(8) {
    animation-name: slideTop;
  }
  li:nth-child(9) {
    animation-name: slideRight;
  }

  @keyframes slideLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes slideRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideTop {
    0% {
      opacity: 0;
      transform: translateY(-100px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slideBottom {
    0% {
      opacity: 0;
      transform: translateY(100px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

Demo

Also read, Simple tutorial to create SnackBar Notification using vanilla JavaScript

Final Words

Whether you’re a seasoned web developer or just starting out, these text animations will inspire you to take your website to the next level. Also, do check out more awesome articles like these and share them with your friends, family, and colleagues!