html - CSS不透明度过渡一次淡入一行
问题描述
我正在尝试使用过渡来改变不透明度并在三行中逐行淡入。我的页面上有一个带有 3 p 和强标签的 div,我试图在大约 2 秒后淡入每一行,中间有 0.5 秒。这是我正在尝试的 div 和 css 的小提琴。我已经搜索了这个主题并尝试了一些 css 和 js 的变体,但是无论我做什么,这些线条一开始都是完全可见的,但是如果我通过检查器切换不透明度,它就会进出转换(也没有延迟由于某些原因)。任何帮助将不胜感激,谢谢!
http://jsfiddle.net/7uR8z/5047/
<div class=".Index-gallery-item-content-body">
<p>
<strong>Test Line 1</strong>
</p>
<p>
<strong>Line 2 Here</strong>
</p>
<p>
<strong>Awesome Line 3</strong>
</p>
</div>
CSS:
.Index-gallery-item-content-body p
{
opacity:0
}
.Index-gallery-item-content-body p:nth-child(1)
{
opacity:1;
transition-delay: 2.5s;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.Index-gallery-item-content-body p:nth-child(2)
{
opacity:1;
transition-delay: 3s;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-ou
}
.Index-gallery-item-content-body p:nth-child(3)
{
opacity:1;
transition-delay: 3.5s;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-ou
}
解决方案
您正在寻找动画而不是过渡:
.Index-gallery-item-content-body p {
opacity: 0
}
.Index-gallery-item-content-body p:nth-child(1) {
animation: change 2s ease-in-out forwards;
}
.Index-gallery-item-content-body p:nth-child(2) {
animation: change 2s ease-in-out forwards;
animation-delay: 2.5s;
}
.Index-gallery-item-content-body p:nth-child(3) {
animation: change 2s ease-in-out forwards;
animation-delay: 5s;
}
@keyframes change {
to {
opacity: 1
}
}
<div class="Index-gallery-item-content-body">
<p>
<strong>Test Line 1</strong>
</p>
<p>
<strong>Line 2 Here</strong>
</p>
<p>
<strong>Awesome Line 3</strong>
</p>
</div>
推荐阅读
- python - 如何比较python中的两个HTML文件并只打印差异?
- node.js - NodeJs 从外部 API 返回
- c# - Xamarin UITest iOS 无法访问 webview 元素
- julia - 是否可以用宏改变函数的主体?
- angular - Angular 6 没有正确显示错误(它只显示 ERROR Error: "[object Object]" )
- arm - 堆栈指针和程序计数器有什么区别?
- javascript - 使用正则表达式如何在 url 中获得两个单词之间的匹配?
- javascript - 未捕获的错误:使用 react 创建旭日形图时出现 Highcharts 错误 #17
- java - Javax Websocket使用路径参数提交登录数据,好的做法?
- django - 按范围 django 获取 ids group