JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Hello World!</h1>

<h2>Hello World!</h2>

CSS

h1 {
    display: inline-block;
    position: relative;
}
h2{
  transform: translate(10px, 10px);
}
h1:before {
    content: "[";
    position: absolute;
    display: block;
    top: 0;
    -webkit-animation: bracketleft 1s 1 forwards;
    animation: bracketleft 1s 1 forwards;
}

h1:after {
    content: "]";
    position: absolute;
    display: block;
    top: 0;
    -webkit-animation: bracketright 1s 1 forwards;
    animation: bracketright 1s 1 forwards;
}

@-webkit-keyframes bracketleft {
  0%   { opacity: 0; left: 50%; }
  100% { opacity: 1; left:-10px; }
}
@-webkit-keyframes bracketright {
  0%   { opacity: 0; right: 50%; }
  100% { opacity: 1; right: -10px; }
}