Words Animation with CSS3

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

See the following HTML and CSS3. We haven’t included the prefixes in the following CSS3. All prefixes are included in the dabblet, Otherwise you can use the -prefix-free js. -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

HTML

1
2
3
4
5
6
<div class="anim">
    <span>CSS3 Animation</span>
    <span>Smashing Magazine</span>
    <span>Dabblet</span>
    <span>Animation with CSS3</span>
</div>

CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.anim span {
position:absolute;
animation: animateWords 12s linear infinite 0s;
text-transform:uppercase;
display:block;
font-size:400%;
font-family:arial;
width: 100%;
overflow: hidden;
white-space: nowrap;
opacity:0;
}
.anim span:nth-child(2){
animation-delay: 3s; 
color:red;
}
.anim span:nth-child(3){
animation-delay: 6s; 
color:green;
}
.anim span:nth-child(4){
animation-delay: 9s; 
color:blue;
}
@keyframes animateWords{
  0% { opacity: 0; animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}

You can see the result in dabblet. Click here