x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
4
<!-- Styles --> 
5
<style>
6
.example5 {
7
 height: 50px;  
8
 overflow: hidden;
9
 position: relative;
10
}
11
.example5 h3 {
12
 position: absolute;
13
 width: 100%;
14
 height: 100%;
15
 margin: 0;
16
 line-height: 50px;
17
 text-align: left;
18
 /* Apply animation to this element */  
19
 -moz-animation: example5 5s linear infinite alternate;
20
 -webkit-animation: example5 5s linear infinite alternate;
21
 animation: example5 5s linear infinite alternate;
22
}
23
/* Move it (define the animation) */
24
@-moz-keyframes example5 {
25
 0%   { -moz-transform: translateX(70%); }
26
 100% { -moz-transform: translateX(0%); }
27
}
28
@-webkit-keyframes example5 {
29
 0%   { -webkit-transform: translateX(70%); }
30
 100% { -webkit-transform: translateX(0%); }
31
}
32
@keyframes example5 {
33
 0%   { 
34
 -moz-transform: translateX(70%); /* Firefox bug fix */
35
 -webkit-transform: translateX(70%); /* Firefox bug fix */
36
 transform: translateX(70%);        
37
 }
38
 100% { 
39
 -moz-transform: translateX(0%); /* Firefox bug fix */
40
 -webkit-transform: translateX(0%); /* Firefox bug fix */
41
 transform: translateX(0%); 
42
 }
43
}
44
</style>
45
46
<!-- HTML -->
47
<div class="example5">
48
<h3>Bouncing text... </h3>
49
</div>