遍历CSS元素的宽度

Question

是否可以使用jQuery的.css('width', '0%')并使用JavaScript循环遍历它以将其扩展到100％？

// Flashing function
fadeloop('.name-part.p', 1500, 500, true)
fadeloop('.name-part.y', 900, 300, true)
fadeloop('.name-part.x', 1000, 3200, true)
fadeloop('.name-part.i', 800, 2200, true)
fadeloop('.name-part.s', 200, 1400, true)

function fadeloop(el,timeout,timein,loop){
    var $el = $(el),intId,fn = function(){
         $el.fadeOut(timeout).fadeIn(timein);
    };
    fn();
    if(loop){
        intId = setInterval(fn,timeout+timein+100);
        return intId;
    }
    return false;
}

// Loop from 0% width to 100% width

$('document').ready(function(){
  $('.name-home').css('width', '0%');
})

.name-home {
  width: 100%;
  max-width: 754px;
  height: 300px;
  position: absolute;
  margin: 0 auto;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如果有兴趣，可以提供链接。

Answer 1

我不确定这是否是您想要的效果，但是我相信CSS动画确实是可行的方法。这是一个相当平滑的“弯曲” /“呼吸”效果：

#wrapper { text-align: center }
.name-home {
  display: inline-block;
  animation-name: anim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
}
@keyframes anim {
  from { width:0% }
  to { width:20% }
}

<div id="wrapper"
><span class="name-home p">p</span
><span class="name-home y">y</span
><span class="name-home x">x</span
><span class="name-home i">i</span
><span class="name-home s">s</span
></div>

或者也许这更接近您想要达到的目标。

#wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.name-home {
  animation-iteration-count: infinite;
  background: #000;
  color: #fff;
  text-align: center;
}
.name-home.p {
  animation-duration: 2s;
  animation-name: anim-py;
}
@keyframes anim-py {
  from { width:0% }
  75% { width:100% }
  to { width:0% }
}
.name-home.y {
  animation-duration: 1.2s;
  animation-name: anim-py;
}
.name-home.x {
  animation-duration: 4.2s;
  animation-name: anim-xs;
}
@keyframes anim-xs {
  from { width:0% }
  75% { width:100% }
  to { width:0% }
}
.name-home.i {
  animation-duration: 2.4s;
  animation-name: anim-i;
}
@keyframes anim-i {
  from { width:0% }
  75% { width:100% }
  to { width:0% }
}
.name-home.s {
  animation-duration: 1.2s;
  animation-name: anim-xs;
}

<div id="wrapper"
><div class="name-home p">p</div
><div class="name-home y">y</div
><div class="name-home x">x</div
><div class="name-home i">i</div
><div class="name-home s">s</div
></div>