CSS 带有延迟和过渡的边框环绕效果

Question

我正在尝试在此处重新创建与“每日名言”完全相同的边框效果：

https://www.forbes.com/（请向下滚动页面）

所以它被延迟并环绕。

https://jsfiddle.net/benchesters/w8djLcb7/3/

问题是我无法让任何动画正常工作，我也不知道为什么，尽管使用了相同的 html 和 css。

.qotd-section.animated-borders .border-top-1,.qotd-section.animated-borders .border-top-2{
    -webkit-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s
}
.qotd-section.animated-borders .border-left,.qotd-section.animated-borders .border-right{
    -webkit-transition-delay:.7s;
    -o-transition-delay:.7s;
    transition-delay:.7s
}
.qotd-section.animated-borders .border-bottom-1,.qotd-section.animated-borders .border-bottom-2{
    -webkit-transition-delay:1.4s;

Answer 1

这似乎是一个非常基本的问题，确保您了解基础知识，一个很好的资源是 w3 schools 关于 css 转换的教程

Css 过渡

有很多不同的方式来制作动画。此特定动画使用 css 过渡。
基本上，转换指定元素如何从一种状态变为另一种状态。

本例中的状态是应用的 css 规则。一旦应用 class，应用的 css 规则将发生变化。在本例中是 animated-borders.

在下面的示例中，我添加了一个按钮，用于从 qotd-section 元素中添加或删除 animated-borders class。只要应用 animated-borders class，您就会看到动画播放。在他们自己的页面上，他们可能会在元素滚动到视图中时添加此 class。有关示例，请参阅 w3 schools scoll 事件。

var btn = document.querySelector('.toggle-class');

btn.onclick = function() {
  var el = document.querySelector('.qotd-section');
  el.classList.toggle('animated-borders');
}

.qotd-section {
  padding: 25px 100px;
  position: relative;
  text-align: center
}

.qotd-section .animated-border__horizontal {
  background-color: #ece5c0;
  height: 8px;
  position: absolute;
  width: 0
}

.qotd-section .animated-border__vertical {
  background-color: #ece5c0;
  height: 0;
  position: absolute;
  top: 0;
  width: 8px
}

.qotd-section .border-left {
  left: 0
}

.qotd-section .border-right {
  right: 0
}

.qotd-section .border-top-1 {
  margin-left: calc(50% - 100px);
  top: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}

.qotd-section .border-top-2 {
  left: 50%;
  top: 0
}

.qotd-section .border-bottom-1 {
  bottom: 0;
  margin-left: calc(100% - 100px);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}

.qotd-section .border-bottom-2 {
  bottom: 0;
  left: 0
}

.qotd-section.animated-borders .animated-border__horizontal {
  -webkit-transition: width .7s ease-in;
  -o-transition: width .7s ease-in;
  transition: width .7s ease-in;
  width: 50%
}

.qotd-section.animated-borders .animated-border__vertical {
  height: 100%;
  -webkit-transition: height .7s ease-in;
  -o-transition: height .7s ease-in;
  transition: height .7s ease-in
}

.qotd-section.animated-borders .border-top-1,
.qotd-section.animated-borders .border-top-2 {
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s
}

.qotd-section.animated-borders .border-left,
.qotd-section.animated-borders .border-right {
  -webkit-transition-delay: .7s;
  -o-transition-delay: .7s;
  transition-delay: .7s
}

.qotd-section.animated-borders .border-bottom-1,
.qotd-section.animated-borders .border-bottom-2 {
  -webkit-transition-delay: 1.4s;
  -o-transition-delay: 1.4s;
  transition-delay: 1.4s
}

.qotd-section__label {
  background-color: #fcfcfc;
  color: #737373;
  font-size: 18px;
  letter-spacing: 2px;
  padding: 0 20px;
  position: absolute;
  right: 50%;
  top: 4px;
  -webkit-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  z-index: 1
}

.qotd-section__description {
  font: 700 18px Merriweather, serif;
  opacity: 0
}

.qotd-section__author,
.qotd-share__container {
  opacity: 0
}

.qotd-section__byline-author {
  font: 700 15px Merriweather, serif
}

.qotd-section__byline-title {
  font-size: 13px
}

.qotd-section.animated-borders .qotd-section__author,
.qotd-section.animated-borders .qotd-section__description {
  opacity: 1;
  -webkit-transition: opacity .7s cubic-bezier(.6, -.28, .735, .045);
  -o-transition: opacity .7s cubic-bezier(.6, -.28, .735, .045);
  transition: opacity .7s cubic-bezier(.6, -.28, .735, .045)
}

.qotd-section.animated-borders .qotd-section__author {
  -webkit-transition-delay: .7s;
  -o-transition-delay: .7s;
  transition-delay: .7s
}

.qotd-section.animated-borders .qotd-share__container {
  opacity: 1;
  -webkit-transition: opacity .7s cubic-bezier(.6, -.28, .735, .045);
  -o-transition: opacity .7s cubic-bezier(.6, -.28, .735, .045);
  transition: opacity .7s cubic-bezier(.6, -.28, .735, .045);
  -webkit-transition-delay: 1.4s;
  -o-transition-delay: 1.4s;
  transition-delay: 1.4s
}

@media (min-width:769px) {
  .qotd-section:hover .social-share__arrow {
    pointer-events: none;
    -webkit-transform: translateX(-28px);
    -ms-transform: translateX(-28px);
    transform: translateX(-28px)
  }
  .qotd-section:hover .qotd-share__icons {
    -webkit-transition: all .2s ease .2s;
    -o-transition: all .2s ease .2s;
    transition: all .2s ease .2s
  }
  .qotd-section:hover .qotd-share__icons a {
    cursor: pointer;
    opacity: 1;
    z-index: 1
  }
  .qotd-section:hover .social-share__icon-wrapper {
    position: static;
    z-index: 1
  }
  .qotd-section:hover .qotd-share__text {
    opacity: 0;
    z-index: -1
  }
}

@media (max-width:768px) {
  .qotd-wrapper {
    background: #fff;
    margin: -24px 0 0;
    padding: 25px 15px
  }
  .qotd-section {
    margin: 0;
    padding: 25px 45px
  }
  .qotd-section .border-top-1 {
    margin-left: calc(50% - 45px)
  }
  .qotd-section .border-bottom-1 {
    margin-left: calc(100% - 45px)
  }
  .qotd-section .qotd-share__icons {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
  }
  .qotd-section .qotd-share__icons a {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    opacity: 1;
    -webkit-order: 1;
    order: 1;
    z-index: 1
  }
  .qotd-section__label {
    background-color: #fff
  }
  .qotd-section__description {
    font-size: 14px
  }
  .qotd-share__container {
    width: auto
  }
  .qotd-share .qotd-share__text,
  .qotd-share .social-share__arrow {
    display: none
  }
  .social-share__icon-wrapper {
    z-index: 1
  }
}

<button class="toggle-class">
  toggle class
</button>
<div class="qotd-wrapper">
  <div class="qotd-section fs-content ">
    <div class="animated-border__horizontal border-top-1"></div>
    <div class="animated-border__horizontal border-top-2"></div>
    <div class="animated-border__vertical border-left"></div>
    <div class="animated-border__vertical border-right"></div>
    <div class="animated-border__horizontal border-bottom-1"></div>
    <div class="animated-border__horizontal border-bottom-2"></div><span class="qotd-section__label">QUOTE OF THE DAY</span>
    <p class="qotd-section__description">“I think at the beginning of every revolution, there’s this opening of a wound.”</p>
    <p class="qotd-section__author"><span class="qotd-section__byline-author">Charlize Theron</span><span class="qotd-section__byline-title">, Actress</span></p>
  </div>
</div>

CSS 带有延迟和过渡的边框环绕效果

CSS Border Wrap Around Effect with Delay & Transitions

css

css-animations

Css 过渡