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

【问题标题】：CSS3 Animations Border Expanding Outwards from CenterCSS3 动画边框从中心向外扩展
【发布时间】：2018-09-18 08:22:30
【问题描述】：

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

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

它也是水平居中的 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

我觉得这可能是我在关键帧声明中遗漏的非常简单的东西。感谢您的帮助！

【问题讨论】：

详细说明...jsfiddle.net/k8s1h32o我需要这个从右到左制作动画。

标签： css animation width border reverse

【解决方案1】：

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

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

我只是做了以下事情：

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

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

【讨论】：