CSS3过渡-淡出效果
我正在尝试在纯CSS中实现“淡出”效果。我确实在网上研究了几种解决方案，但是，在在线阅读文档后，我试图弄清为什么幻灯片动画不起作用。有指针吗？
.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;
}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
问题答案：
您可以改用转换：
.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;
}
-
问题内容： ..当前它具有上/下滚动效果，但是我希望背景随着淡入淡出效果而改变，我应该在CSS中更改什么？ 谢谢！ 问题答案： 您无法在两个背景图片之间切换，因为浏览器无法知道您想要插入的内容。如您所知，您可以转换背景位置。如果您希望图像在鼠标悬停时淡入，我认为通过CSS过渡实现此效果的最佳方法是将图像放在包含元素上，然后在链接本身上为背景颜色设置动画：
-
.animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf
-
问题内容： 元素是否触发了任何事件来检查css3转换是否已开始或结束？ 问题答案： W3C CSS过渡草案 CSS Transition的完成将生成相应的DOM事件。将为每个经历过渡的属性触发一个事件。这使内容开发人员可以执行与转换完成同步的操作。 要确定转换何时完成，请为在转换结束时发送的DOM事件设置一个JavaScript事件监听器函数。该事件是WebKitTransitionEvent的实
-
问题内容： 我对css3 transition属性的渲染速度有疑问。 假设我有许多要素： 使用一个声明将所有这些元素的所有转换作为目标更有效。但是我的问题是：针对每个元素的特定过渡属性，在动画渲染的平滑度和快速度方面是否“更快”？例如： 我这样做的逻辑是，即使一个元素只有一个属性，css的“引擎”是否必须搜索“所有”过渡属性，也可能会减慢速度。 有谁知道是这样吗？谢谢！ 问题答案： 是的，使用可能
-
定义 基于animejs封装的React组件。 图片展示 代码演示 import Anime from 'pile/dist/components/anime' const {CssTransform} = Anime let moveAlone = { targets: '.anime-move-demo-alone', left: '240px', backgroundColo
-
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 尽管 CSS3 过渡效果是足够的过渡的一个元素,但是 text-transform 属性可以提高 CSS3 过渡效果的风格。 主要有四个属性的CSS3转换效果,已被描述如下: transition-property transition-duration transition-timing-function transition-delay