html - 对一个 div 元素应用两个 CSS 过渡
问题描述
我想为我的代码和问题提前道歉。我是一名平面设计师,但一直在为在线数字横幅编辑一些 html。
目前,我有一个彩色条在 2 秒后从左向右滑入。使用“动画名称:barAnim”效果很好
然后我希望同一个栏在 7.5 秒后淡出。但是,一旦我添加了“动画名称:淡出”,该条就会中断,并且仅在 7.5 秒标记处闪烁。
所有这些都需要在没有任何用户输入的情况下自动运行。
请参阅下面的当前代码。任何帮助将不胜感激。
.col_bar1 {
left: 0px;
top: 412px;
width: 132px;
height: 11px;
background: #5d7773;
opacity: 0;
}
.col_bar1 {
animation-name: barAnim;
-webkit-animation-name: barAnim;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.col_bar {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
}
}
@-webkit-keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
/*--start from lhs--*/
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="col_bar1"></div>
解决方案
你可以做逗号分隔的动画。我在这里使用了动画速记并将其拆分为多行以提高可读性。
CSS
animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
-webkit-animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
推荐阅读
- ios - 当我以编程方式使用锚点时,为什么 ImageView 的位置错误?
- shopify - 如何在shopify中查看产品页面模板
- pact - 事件驱动应用程序的协议流
- iframe - Vimeo 嵌入不跟踪
- java - 在 Spring Boot 中自定义 @Cacheble
- amazon-web-services - 公共子网中的 NAT 网关和 EC2 实例能否共享同一个 AWS ElasticIP?
- python - 没有名为“polyglot.text”的模块;'polyglot' 不是一个包
- python - 从 SQLite3 表向叶图添加标记
- javascript - Instagram 如何缩小 CSS?
- mysql - 每月/每年计算不同但在查询结果中显示所有日期