CSS Pulsing Text Animation

May 10, 2021•240 words

A pure-CSS text animation, built as a React component, with TypeScript + Styled-Components

Demo

Code

import React from 'react';
import styled, { keyframes } from 'styled-components';

type TitleProps = {
  colors: string[];
  text: string;
}

const Title = (props: TitleProps) => {
  const { colors, text } = props;
  return (
    <header className="app-title">
      {colors.map((color: string, index: number) => (
        <TitleText key={index} color={color} index={index}>
          {text}
        </TitleText>
      ))}
    </header>
  );
}

const titleAnimation = keyframes`
  40%,50% { transform: translate(-50%, -65%) scale(1.05);}
  0%, 90%, 100% { transform: translate(-50%, -45%) scale(0.95); }
`;

const TitleText = styled.h2 <{ color: string; index: number; }>`
  color: ${props => props.color};
  width: 100%;
  margin: 0 auto;
  text-align: center;
  cursor: default;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12vw;
  animation-name: ${titleAnimation};
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  font-family: "Righteous", cursive;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  animation-duration: 5s;
  animation-delay: ${props => props.index / 2}s;
`;

export default Title;

Usage is simple, just import the component, and pass in the necessary props. Such as:

<Title colors={colors} text={text} />

Or as a complete application, something like:

import React from 'react';
import { render } from 'react-dom';
import Title from './Title';
import './style.css';

const colors = ['#ffd166', '#06d6a0', '#118ab2', '#ef476f'];
const text = 'Hello World!';

function App() {
  return (
    <div className="App">
      <Title colors={colors} text={text} />
    </div>
  );
}
render(<App />, document.getElementById('root'));