HTML
3
1
<div class="container">2
<p class="text">Falling Text</p>3
</div>CSS
63
1
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);2
body {3
background-color: #F5F5F5;4
color: #555;5
font-size: 1.1em;6
font-family: 'Gentium Basic', serif;7
}8
9
.container {10
margin: 50px auto;11
min-width: 320px;12
max-width: 500px;13
}14
15
.text {16
font-size: 3em;17
font-weight: bold;18
color: #0099cc;19
transform-origin: left center;20
transform-origin: left center;21
transform-origin: left center;22
animation: fall 4s infinite;23
animation: fall 4s infinite;24
}25
26
@-webkit-keyframes fall {27
from {28
transform: rotate(0) translateX(0);29
transform: rotate(0) translateX(0);30
opacity: 1;31
}32
50%,33
60% {34
transform: rotate(90deg) translateX(0);35
transform: rotate(90deg) translateX(0);36
opacity: 1;37
}38
to {39
transform: rotate(90deg) translateX(200px);40
transform: rotate(90deg) translateX(200px);41
opacity: 0;42
}43
}44
45
@keyframes fall {46
from {47
transform: rotate(0) translateX(0);48
transform: rotate(0) translateX(0);49
opacity: 1;50
}51
50%,52
60% {53
transform: rotate(90deg) translateX(0);54
transform: rotate(90deg) translateX(0);55
opacity: 1;56
}57
to {58
transform: rotate(90deg) translateX(200px);59
transform: rotate(90deg) translateX(200px);60
opacity: 0;61
}62
}63
JS
1
1