21 March 2019

Game of Thrones Final Season CSS Intro Animation

While waiting for White Walkers to kill us all, I've decided to play a little bit more with CSS animations. 

This simple text intro have 4 keyframes where letter-spacing is changing, creating interesting movie-like effect. Title text is fading in from black to white and subtitle appears at the end giving the animation dramatic ending, which is expected from this kind of show.

In this case animation lasts for 3 seconds, feel free to play with parameters as you like.

Here is the code and demo:

<!DOCTYPE html>  
   <meta charset="utf-8">  
      <title>Game of Thrones intro</title>  
      * {  
           padding: 0;  
           margin: 0;  
           font-family: sans-serif;  
      body {  
           background: #000;  
      .container {  
           text-align: center;  
           position: absolute;  
           top: 50%;  
           left: 50%;  
           transform: translate(-50%,-50%);  
      .container span {  
           text-transform: uppercase;  
           display: block;  
      .text_title {  
           color: white;  
           font-size: 60px;  
           font-weight: 700;  
           letter-spacing: 8px;  
           margin-bottom: 20px;  
           background: black;  
           position: relative;  
           animation: text 3s 1;  
      .text_subtitle {  
           font-size: 30px;  
           color: #5DADE2;  
      @keyframes text {  
           0% {  
                color: black;  
                margin-bottom: -40px;  
           25% {  
                letter-spacing: 25px;  
                margin-bottom: -40px;  
           75% {  
                letter-spacing: 5px;  
                margin-bottom: -40px;  
           95% {  
                letter-spacing: 8px;  
  <div class="container">  
   <span class="text_title">Game of Thrones</span>  
      <span class="text_subtitle">final season</span>  
The Spring is coming! Happy Coding :) *_*



template by blogger templates