请注意,在下面的动画gif中,文本淡入淡出...还要注意,每一行文本对上面的行都有轻微的延迟...
如何使用CSS实现此效果?
谢谢
发布于 2018-08-15 08:33:13
下面是你如何做到这一点:
/* Safari 4.0 - 8.0 */
@-webkit-keyframes slideInFromBottomMulti {
0% {
-ms-transform: translateY(50px); /* IE 9 */
-webkit-transform: translateY(50px); /* Safari 3-8 */
transform: translateY(50px);
opacity: 0;
}
50% {
-ms-transform: translateY(0); /* IE 9 */
-webkit-transform: translateY(0); /* Safari 3-8 */
transform: translateY(0);
opacity: 1;
}
80% {
-ms-transform: translateY(0); /* IE 9 */
-webkit-transform: translateY(0); /* Safari 3-8 */
transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(0); /* IE 9 */
-webkit-transform: translateY(0); /* Safari 3-8 */
transform: translateY(0);
opacity: 0;
}
}
/* Standard syntax */
@keyframes slideInFromBottomMulti {
0% {
-ms-transform: translateY(50px); /* IE 9 */
-webkit-transform: translateY(50px); /* Safari 3-8 */
transform: translateY(50px);
opacity: 0;
}
50% {
-ms-transform: translateY(0); /* IE 9 */
-webkit-transform: translateY(0); /* Safari 3-8 */
transform: translateY(0);
opacity: 1;
}
80% {
-ms-transform: translateY(0); /* IE 9 */
-webkit-transform: translateY(0); /* Safari 3-8 */
transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(0); /* IE 9 */
-webkit-transform: translateY(0); /* Safari 3-8 */
transform: translateY(0);
opacity: 0;
}
}
#showcase-multi p{
margin: 5px 0;
opacity: 0;
}
#showcase-multi{
width: 500px;
height: 150px;
padding: 1.7rem;
background-color: #CC0000;
color: #fff;
font-size: 2em;
}
#showcase-multi #first-row{
-webkit-animation: slideInFromBottomMulti 2s ease-out 0s infinite; /* Safari 4.0 - 8.0 */
animation: slideInFromBottomMulti 2s ease-out 0s infinite;
}
#showcase-multi #second-row{
-webkit-animation: slideInFromBottomMulti 2s ease-out 0.15s infinite; /* Safari 4.0 - 8.0 */
animation: slideInFromBottomMulti 2s ease-out 0.15s infinite;
}
#showcase-multi #third-row{
-webkit-animation: slideInFromBottomMulti 2s ease-out 0.3s infinite; /* Safari 4.0 - 8.0 */
animation: slideInFromBottomMulti 2s ease-out 0.3s infinite;
}
<div id="showcase-multi">
<p id="first-row">First row</p>
<p id="second-row">Second row</p>
<p id="third-row">Third row</p>
</div>
https://stackoverflow.com/questions/51851128
复制相似问题