我正在尝试创建侧边栏动画效果:
<div class="sidebar-description sidebar-personal-info-section">
A passionate
<span class="changing-keywords" id="change">
<strong>
<b class="hidden">software engineer</b>
<b class="hidden">lifelong learner</b>
<b class="hidden">blogger</b>
<b class="hidden">traveller</b>
</strong>
</span><br>
</div>
我已经编写了 HTML 代码,但问题是我应该如何使用 slide-out
动画效果一次显示一个文本?该循环应该可以无限次运行。
最佳答案
使用 CSS 关键帧动画使其变得简单。
下面是一个例子。
body{
font-family:calibri;
}
.codinfox-changing-keywords{
vertical-align:top;
overflow:hidden;
height:20px;
position:relative;
display: inline-block;
width: 250px;
}
.hidden{
position:absolute;
top: 20px;
display:inline-block;
width:250px;
opacity:0;
animation: slideme 8s infinite;
}
.hidden:nth-child(3){
animation-delay: 2s;
}
.hidden:nth-child(5){
animation-delay: 4s;
}
.hidden:nth-child(7){
animation-delay: 6s;
}
@keyframes slideme {
0% {
top: 20px;
opacity:0;
}
5% {
top: 0px;
opacity:1;
}
10%{
top : 0;
opacity:1;
}
20%{
opacity:1;
}
25% {
opacity:0.1;
top : 0;
}
30% {
opacity:0;
top: 20px;
}
}
<div class="codinfox-sidebar-description sidebar-personal-info-section">
A passionate
<div class="codinfox-changing-keywords" id="change">
<strong>
<b class="hidden">software engineer</b><br/>
<b class="hidden">lifelong learner</b><br/>
<b class="hidden">blogger</b><br/>
<b class="hidden">traveller</b>
</strong>
</div>
</div>
可以测试一下here还有!
关于javascript - 如何在 for 循环中为文本设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52881172/