我试图在纯CSS中实现"淡出"效果.这是小提琴.我确实在线查看了几个解决方案,但是,在线阅读完文档后,我试图弄清楚为什么幻灯片动画不起作用.有什么指针吗？
这是HTML
.dummy-wrap {
animation: slideup 2s;
-moz-animation: slideup 2s;
-webkit-animation: slideup 2s;
-o-animation: slideup 2s;
}
.success-wrap {
width: 75px;
min-height: 20px;
clear: both;
margin-top: 10px;
}
.successfully-saved {
color: #FFFFFF;
font-size: 20px;
padding: 15px 40px;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #00b953;
}
@keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}
@-moz-keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}
@-webkit-keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}
@-o-keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}CSS
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>imm*_*odi 140
这是另一种做同样的方法.
淡出效果
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
淡出效果
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
UPDATE 1:
我找到了更多最新的教程CSS3 Transition:fadeIn和fadeOut like效果隐藏了显示元素和工具提示示例:使用CSS3转换显示隐藏提示或帮助文本这里带有示例代码.
UPDATE 2: (添加了@ big-money要求的详细信息)
在显示元素时(通过切换到可见类),我们希望可见性:可见立即启动,因此只能转换不透明度属性.当隐藏元素时(通过切换到隐藏类),我们想要延迟visibility:hidden声明,这样我们就可以先看到淡出过渡.我们通过声明可见性属性的转换来做到这一点,持续时间为0,延迟为0.你可以在这里看到详细的文章.
我知道我来不及回答但发布这个答案以节省其他时间.希望它能帮到你!!
kar*_*ikr 77
您可以使用转换:
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
这是您问题的工作代码。
享受编码......
<html>
<head>
<style>
.animated {
background-color: green;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;animation-duration: 10s;
-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOut"></div>
</body>
</html>
小智 6
由于display不是可设置动画的CSS属性之一；一种显示方式：不使用纯css3动画替换fadingOut动画，只需在最后一帧设置width：0和height：0，然后使用animation-fill-mode：转发以保持width：0和height：0属性；
@-webkit-keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
@keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
.display-none.on{
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
}