我希望有一个标签可以无限制地下落。我尝试使用CSS transition实现,但无法使其正常工作。
我想让类名为.fall
的标签不断地下落。如何才能实现这一点呢?
抱歉提出模糊的问题,但是可能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%);
}
}