Fire

Font Animations

Explosion

HTML

<span class="fireaction">Fire or Explosion</span>

CSS

/***Start-----Fire -----------------------------------------Start*/
.fireaction {padding: 5px 20px 20px 0px; margin: 30px; color: red; font-size: 150px; font-weight: 900; text-shadow: 1px 1px 1px grey, -1px -1px 5px yellow, -2px -2px 5px orange, -3px -3px 5px red, -4px -4px 5px yellow, -5px -5px 5px pink, -6px 6px 5px yellow, 7px 7px 5px orange, -8px -8px 5px yellow, -9px -9px 5px white, -10px -10px 5px red, -11px -11px 5px orange, -12px -12px 5px orange, -13px -13px 5px yellow, -14px -14px 5px yellow;
    -webkit-animation: fire 10s infinite;
    animation: fire 10s infinite;
}

@-webkit-keyframes fire {
            5% {text-shadow: -1px -1px 30px white, -2px -2px 20px yellow, -3px -3px 20px red, -4px -4px 20px orange, -5px -5px 30px red, -6px 6px 20px orange, 7px 7px 200px yellow, -8px -8px 20px red, -9px -9px 20px yellow, -10px -10px 20px red, -11px -11px 20px red, -12px -12px 20px red, -13px -13px 20px orange, -14px -14px 30px red; color: gold; opacity: .7;}
   
}

@keyframes fire {
            5% {text-shadow: -1px -1px 30px white, -2px -2px 20px yellow, -3px -3px 20px red, -4px -4px 20px orange, -5px -5px 30px red, -6px 6px 20px orange, 7px 7px 200px yellow, -8px -8px 20px red, -9px -9px 20px yellow, -10px -10px 20px red, -11px -11px 20px red, -12px -12px 20px red, -13px -13px 20px orange, -14px -14px 30px red; color: gold; opacity: .7;}
   
}
/***End-----Fire -----------------------------------------end*/