How to Create Cinematic Text Animation with CSS

Creating visually stunning text animations is an effective way to enhance the overall look and feel of your website. With the use of CSS, you can easily create cinematic text animations that will capture your audience’s attention and leave a lasting impression.

In this article, I will show you how to create cinematic text animations with CSS.

Step 1: Start with the Basics

Before you begin creating your cinematic text animation, it’s important to start with the basics. This includes selecting the appropriate font, font size, and color for your text. You want to choose a font that is easy to read and complements the overall design of your website though in this case for a cinematic look and feel I used the Impact font.

This is how the HTML looks like:

<section class="banner">
      <h1>2060</h1>
      <video autoplay muted>
        <source src="assets/war.mp4" type="video/mp4">
      </video>
</section>

The look and feel of the title:

.banner h1 {
  font: bold 10rem/1 Impact, sans-serif;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

Step 2: Style the video

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
}
.banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left:0;
}

Step 3: Add a blending mode on the video

We need to create the keyhole effect here, meaning the video needs to be visible only in the shape of the text, just by looking at our video through a keyhole. To achieve this we need to make the background black for the section and the color of the text white.

Why did we do this? Because if we will use blending-mode multiply, that will bring the what’s behind the video in front of the video. All that was black behind our video will be overlapping our video and all that was white(like our text) will become invisible on the video.

This actually means that we will see our video through a keyhole in shape of our text.

As you can see it in this image, the video is still there but the black background got in front of our video and our white text cut a whole in that black background.

.banner {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
}
.banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left:0;
  mix-blend-mode: multiply;
}

Step 4: Add the animation and incorporate Keyframes

The timing of your cinematic text animation is crucial to its overall effectiveness. You want to ensure that your animation is not too fast or too slow, and that it complements the overall flow of your website. Experiment with different timing options to find the perfect balance.

@keyframes cinematicText {
  0% {transform: scale(90) translateX(-1vw);}
  50% {transform: scale(4.5) translateX(0);}
  100% {transform: scale(2.5) translateX(0);}
}
.banner h1 {
  font: bold 10rem/1 Impact, sans-serif;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  animation: 5s cinematicText 6s  both 1 cubic-bezier(0, 0, .55, .55)
}

Note: Be careful, in the initial state the text in it’s scaled state needs to overlap the entire screen. If you’re text does not overlap the screen you can just change the translateX or translateY values to achieve that.

For the slowing down easing I used custom cubic-bezier values, basically the last 2 values meaning the ending part of our animation.

If this article was not clear enough, take a look also at the video:

In conclusion, creating cinematic text animations with CSS is an effective way to enhance the overall look and feel of your website. By following these simple steps, you can create a visually stunning animation that will captivate your audience and leave a lasting impression. Remember to start with the basics, add animation effects, incorporate keyframes, experiment with timing and test and optimize for best results.

Enjoy!

0