I want a tag to fall down infinitely. I tried to do this with CSS transition, but can't get it to work.
I want the .fall
to constantly rain down. How can I get this to work?
Sorry for making a wag question but may be the fiddle will clear up what I want to accomplish.
JSFIDDLE
HTML
<div class='rain'>
<p class='fallSec'>
< $ " " 1 0 1 0 0 0 $ 1 0 2 ( { $ 1 0=) 0 1 0 0 0 1 }
</p>
</div>
CSS
.rainSec {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.rainSec .fall {
width: 20px;
color: white;
font-size: 36px;
float: left;
margin: 10px;
-webkit-animation: fadeInDown 10s infinite;
animation: fadeInDown 10s infinite;
}
.rain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.rain .fallSec {
color: blue;
width: 20px;
font-size: 36px;
float: left;
margin: 10px;
-webkit-animation: fadeInDown 8s infinite;
animation: fadeInDown 8s infinite;
transition-delay: 8s;
}
@-webkit-keyframes fadeInDown {
0% {
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
}
}
I changed your makup and the animation settings, now the symbols fall down constantly without blank space between them :
DEMO
html,body{height:100%;padding:0;margin:0;}
.wrap{position:relative;height:100%;overflow:hidden;}
.rainSec, .rain {
font-size:2em;
color:blue;
width:1em;
height:100%;
position:absolute;
left:0.5em;
bottom:100%;
overflow:hidden;
}
.rain{
-webkit-animation: fadeInDown 8s infinite;
animation: fadeInDown 8s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.rainSec {
-webkit-animation: fadeInDown 8s 2s infinite;
animation: fadeInDown 8s 2s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes fadeInDown {
0% { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(200%); }
50.1%{ -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(200%); }
}
@-keyframes fadeInDown {
0% { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(200%); }
50.1%{ -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(200%); }
}
<div class="wrap">
<p class='rain'>< $ " " 1 0 1 0 0 0 $ 1 0 2 ( { $ 1 0 = ) 0 1 0 0 0 1 }</p>
<p class='rainSec'>< $ " " 1 0 1 0 0 0 $ 1 0 2 ( { $ 1 0 = ) 0 1 0 0 0 1 }</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With