本文介绍了如何在for循环中为文本设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试以以下方式创建侧边栏动画效果:
I'm trying to create a sidebar animation effect as:
<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代码,但问题在于,如何使用滑出动画效果的时间一次延迟地显示每个文本?循环应该无限次地工作.
I've written the HTML code but issue is that how should I display each text one at a time with small delay with slide-out
animation effect? The loop should work infinite times.
推荐答案
通过使用CSS关键帧动画使其简单.
Make it simple by using CSS key-frame animation.
下面是一个例子.
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>
您也可以在此处进行测试!
这篇关于如何在for循环中为文本设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!