Hover me

3 d   t e x t

change to div

reset

Custom text

Color options

#EF476F

#a23450

#4d1a26

Animation options

        
.text_popspan{
  animation: in 0.5s forwards;
}
.text_popspan:hover{
  animation: out 0.5s forwards;
}

@keyframes out {
0% {
  text-shadow: -4px 4px 0px #EF476F ,
}
50% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
}
100% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
  -12px 12px 0px #4d1a26;
  transform: translate(12px,-12px);
 }
}

@keyframes in {
0% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
  -12px 12px 0px #4d1a26;
  transform: translate(12px,-12px);
}
33% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
}
66% {
  text-shadow: -4px 4px 0px #EF476F ,
}
100% {
  text-shadow: -4px 4px 0px #EF476F ,
 } 
}
            
            
<h3 class="text_pop">
<span>3</span>
<span>d</span>
<span>nbsp</span>
<span>t</span>
<span>e</span>
<span>x</span>
<span>t</span>
</h3>
            
            

Copy all code

See html

        
.text_popspan{
  animation: in 0.5s forwards;
}
.text_popspan:hover{
  animation: out 0.5s forwards;
}

@keyframes out {
0% {
  text-shadow: -4px 4px 0px #EF476F ,
}
50% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
}
100% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
  -12px 12px 0px #4d1a26;
  transform: translate(12px,-12px);
 }
}

@keyframes in {
0% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
  -12px 12px 0px #4d1a26;
  transform: translate(12px,-12px);
}
33% {
  text-shadow: -4px 4px 0px #EF476F , -8px 8px 0px #a23450 ,
}
66% {
  text-shadow: -4px 4px 0px #EF476F ,
}
100% {
  text-shadow: -4px 4px 0px #EF476F ,
 } 
}
            
            
<h3 class="text_pop">
<span>3</span>
<span>d</span>
<span>nbsp</span>
<span>t</span>
<span>e</span>
<span>x</span>
<span>t</span>
</h3>
            
            

Copy all code

See html