如何使多行文本淡入淡出和每行不同的速率?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (85)

关于以下动画gif的注意事项,文本渐渐淡出...还要注意每行文本如何略微延迟到上面的行...

如何用CSS完成这个效果?

提问于
用户回答回答于
/* Safari 4.0 - 8.0 */
@-webkit-keyframes slideInFromBottom {
  0% {
    -ms-transform: translateY(50px); /* IE 9 */
    -webkit-transform: translateY(50px); /* Safari 3-8 */
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 1;
  }
}

/* Standard syntax */
@keyframes slideInFromBottom {
  0% {
    -ms-transform: translateY(50px); /* IE 9 */
    -webkit-transform: translateY(50px); /* Safari 3-8 */
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -ms-transform: translateY(0); /* IE 9 */
    -webkit-transform: translateY(0); /* Safari 3-8 */
    transform: translateY(0);
    opacity: 1;
  }
}

p{
  margin: 5px 0;
}

#container{
  width: 500px;
  height: 200px;
  padding: 1.7rem;
  background-color: #CC0000;
  color: #fff;
  font-size: 2em;
}

#first-row{
  -webkit-animation: slideInFromBottom 0.7s ease-out 0s; /* Safari 4.0 - 8.0 */
  animation: slideInFromBottom 0.7s ease-out 0s;
}
#second-row{
  -webkit-animation: slideInFromBottom 0.7s ease-out 0.07s; /* Safari 4.0 - 8.0 */
  animation: slideInFromBottom 0.7s ease-out 0.07s;
}
#third-row{
  -webkit-animation: slideInFromBottom 0.7s ease-out 0.09s; /* Safari 4.0 - 8.0 */
  animation: slideInFromBottom 0.7s ease-out 0.09s;
}
<div id="container">
  <p id="first-row">First row</p>
  <p id="second-row">Second row</p>
  <p id="third-row">Third row</p>
</div>

热门问答

怎么关闭域名隐私保护?

推荐
根据 ICANN 《通用顶级域名注册数据临时政策细则(Temporary Specification for gTLD Registration Data)》和欧盟《通用数据保护条例》合规要求,腾讯云域名信息(WHOIS)查询结果中将不再展示域名所有者、所有者联系邮箱等信息。鉴于...... 展开详请

设置了云函数环境变量TZ 为 asia/shanghai,云函数端仍是0时区日期,为何不生效?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
设置 TZ=Asia/Shanghai 可以获取到北京时间 image.png image.png image.png ... 展开详请

php发送smtp邮件失败,请帮忙看是腾讯云不支持端口25么?

SQL GM热爱数据库的小工匠
推荐
腾讯云默认限制 TCP:25 端口,支持解封,但是有注意事项: 仅支持解封预付费包年包月的云服务器,暂不支持按量付费的云服务器。 每个腾讯云账号仅可解封5个实例。 请确保 TCP 25端口仅用于连接第三方 SMTP 服务器,并从第三方 SMTP 服务器外发邮件。如发现您直接通过云...... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

配置 https 配置完后报错?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐已采纳

请检查服务器是否安装了代理?如有请尝试移除代理再尝试

另外,curl访问https时候需要确保服务器已经保存了证书,可以通过 curl -k --tlsv1 过滤

所属标签

扫码关注云+社区

领取腾讯云代金券