Question

Image Example for Reference

制作网站并首次真正进入CSS3动画。理想情况下，我希望这两个灰色边框从中心的徽标向外设置动画。我目前让它们动画，但它们只是从左到右动画。它们是通过在两侧都有一个带有边框底部的div来完成的。因此，我认为动画div的宽度从0到100是最好的方法。它工作得很好......只是没有朝着正确的方向大声笑。

注意：CSS在手写笔中，因此没有正常的语法。

动画关键帧：

@keyframes widthExpand {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

分配班级：

.fadewidth
  animation-name widthExpand, fadeIn
  animation-duration 2000ms, 2000ms
  transition-timing-function ease-in
  animation-direction normal

我尝试了不同的动画方向，并且在宽度100％处开始0％，然后将其反转，希望它能解决它。无论我做什么，总是从左到右动画。

它也是以flexbox水平居中的位置。这是HTML：

<div id="centernav" class="">
    <div class="left-links">

        <div class="top-links fadewidth">
        </div>

        <div class="bottom-links">
        </div>

    </div>

    <img src="assets/images/cv-logo-yellow-nodate.svg" id="cvlogo-main" class="fadeindown">

    <div class="right-links">

        <div class="top-links fadewidth">
        </div>

        <div class="bottom-links">
        </div>

    </div>

</div>

CSS：手写笔

.left-links,
.right-links
    width 30%

.top-links
    border-bottom 1px solid #fafafa

#centernav
    display flex
    align-items center
    justify-content center
    flex-direction row
    height 85%
    color nardo

    & h1
        font-family heading
        color gold
        font-size 6.5rem
        font-weight 100
        margin-bottom -22px

    & img
        margin 0 50px

我觉得这可能是非常简单的我可能在关键帧声明中丢失了。谢谢你的帮助！

Answer 1

想出来。由于它们位于中心位置，因此如果给予它们绝对位置，动画将向外强制。我给了父div一个相对位置，内部div占绝对位置。

注意：您必须在关键帧声明中给它一个绝对位置。我尝试在CSS中为类应用绝对位置，但是一旦动画序列完成就会产生奇怪的效果。

我只是做了以下事情：

@keyframes widthExpand {
  from {
    width: 0%;
    position: absolute;
  }

  to {
    width: 100%;
    position: absolute;
  }
}

CSS3动画边框从中心向外扩展

1 个答案: