如何使多行文本淡入淡出，并使每行有不同的淡入淡出速率？
如何使多行文本淡入淡出，并使每行有不同的淡入淡出速率？
提问于 2018-08-15 07:46:15
请注意，在下面的动画gif中，文本淡入淡出...还要注意，每一行文本对上面的行都有轻微的延迟...
如何使用CSS实现此效果？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51851128
复制相关文章
相似问题