CSS3 Text Animation

Flash, a tool used to create animations, games and everything in between we need for our sites. Unfortunately, this tool is not great for SEO purposes and sometimes this can be an obstacle when we want to promote a brand or a product using a nice effect.

Well, with CSS3 it is possible now to accomplish something like this now. CSS3 now provides a nice feature that creates animation for you. First I would recommend reading the css3-animations guideline from the W3 to make sure you understand the concept. Once you are done with this, here's what you need:

You need the following code to create your animation:

@-moz-keyframes appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes blurFadeIn {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); }
  100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); }
}
@-webkit-keyframes blurFadeIn {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); }
  50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); }
  100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); }
}
@keyframes blurFadeIn {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); }
  50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); }
  100% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); }
}
@-moz-keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); }
}
@-webkit-keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); }
}
@keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); }
}
@-moz-keyframes fadeInBack {
  0% { opacity: 0; -moz-transform: scale(0); }
  50% { opacity: 0.4; -moz-transform: scale(2); }
  100% { opacity: 0.2; -moz-transform: scale(5); }
}
@-webkit-keyframes fadeInBack {
  0% { opacity: 0; -webkit-transform: scale(0); }
  50% { opacity: 0.4; -webkit-transform: scale(2); }
  100% { opacity: 0.2; -webkit-transform: scale(5); }
}
@keyframes fadeInBack {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.4; transform: scale(2); }
  100% { opacity: 0.2; transform: scale(5); }
}
@-moz-keyframes fadeInRotate {
  0% { opacity: 0; -moz-transform: scale(0) rotate(360deg); }
  100% { opacity: 1; -moz-transform: scale(1) rotate(0deg); }
}
@-webkit-keyframes fadeInRotate {
  0% { opacity: 0; -webkit-transform: scale(0) rotate(360deg); }
  100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); }
}
@keyframes fadeInRotate {
  0% { opacity: 0; transform: scale(0) rotate(360deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

This create the base structure of animations. Of course this is more code than you need, but this can be used in all your projects.

With this base code we simply have to create our HTML structure.

<ul>
  <li>This is something totally cool</li>
  <li>It is something easy to do</li>
  <li>No FLASH required</li>
  <li>Using only CSS3</li>
  <li><span>Stop using Flash.</span> <span>USE CSS3.</span> <span>Love It.</span></li>
</ul>

With this structure, we need to add the animation code:

* {
  margin: 0;
  padding: 0;
}
body{
  background: #422A20;
  font-size: 2em;
}
ul {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}
ul li {
  color: transparent;
  font-size: 250%;
  position: absolute;
  text-align: center;
  top: 35%;
  width: 100%;
}

/* delay between each text */
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3),
ul li:nth-child(4) {
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
}
ul li:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
ul li:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
ul li:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
ul li:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
ul li:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
/* delay for the last slide */
ul li:nth-child(5) span {
  -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
  -moz-animation: blurFadeIn 1s ease-in 12s backwards;
  -ms-animation: blurFadeIn 3s ease-in 12s backwards;
  animation: blurFadeIn 3s ease-in 12s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
ul li:nth-child(5) span:nth-child(2) {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  -ms-animation-delay: 13s;
  animation-delay: 13s;
}
ul li:nth-child(5) span:nth-child(3) {
  -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -ms-animation-delay: 14s;
  animation-delay: 14s;
}

This will trigger each element of the LI one by one and create the animation

If this does not work, well most probably it's because you are using IE 9 (or before) or Opera 11 (or before). Don't worry, this feature should be supported in version 10 of IE and 12 of Opera.