且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在for循环中为文本设置动画?

更新时间:2022-06-08 22:40:56

通过使用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>

您也可以在此处进行测试!