更改 CSS 关键帧以从中间水平显示而不是垂直显示

Question

我正在尝试更改此 CSS 动画以在 vh 而不是 width % 上工作。基本上我需要它从中间向上和向下而不是向左和向右水平显示。

尝试了很多不同的事情来破译一个解决方案，但是执行以下操作（见下文）没有任何作用。

@keyframes curtain
0%, 50%
    height: 50vh
100%
    width: 0

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
 body {
  font-family: "Open Sans", Helvetica, Verdana, sans-serif;
  margin: 0;
}
h1 {
  font-size: 36px;
}
#intro {
  margin: 0 auto;
  max-width: 1170px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}
#intro::before,
#intro::after {
  -webkit-animation: curtain 2s;
  -moz-animation: curtain 2s;
  -o-animation: curtain 2s;
  animation: curtain 2s;
  background-color: #152a33;
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
}
#intro::before {
  left: 0;
}
#intro::after {
  right: 0;
}
.table {
  display: table;
  height: 100%;
  width: 100%;
}
.table .cell {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}
@-webkit-keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}
@-moz-keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}
@-o-keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}
@keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}

<section id="intro">
  <div class="table">
    <div class="cell">
      <h1>Hello world</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, beatae eius veritatis voluptate ab minus deserunt aliquam saepe, error maiores pariatur nam illo natus dolorem veniam, doloremque, expedita officiis esse.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, natus? Non aperiam eaque neque vero perspiciatis, reprehenderit eveniet quae ut omnis voluptatem architecto maxime cum quaerat dignissimos porro. Provident, magnam!</p>
    </div>
  </div>
</section>

有人知道解决办法吗？谢谢！

Answer 1

只需更改伪元素的定位属性，height和width在正常状态和关键帧内。您似乎只在关键帧内进行了更改，因此它没有正常工作。

在原始演示中，两个伪元素都有 bottom: 0 和 top: 0，这意味着它获得父元素的完整高度 (100vh)。 :before 相对于父级的左边缘定位，而 :after 相对于右边缘定位。在动画期间，两者都获得 50% 宽度，从而产生向左和向右移动的窗帘效果。

对于向上和向下的窗帘移动效果，伪元素需要采用其父元素的 100% 宽度并分别相对于顶部和底部边缘定位（left:0 可以两者都适用，因为两者都应分别位于左上和左下）。

&::before, &::after
    animation: curtain 2s
    background-color: #152a33
    content: ''
    left: 0
    position: absolute

&::before
    top: 0
    width: 100%

&::after
    bottom: 0
    width: 100%

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
 body {
  font-family: "Open Sans", Helvetica, Verdana, sans-serif;
  margin: 0;
}
h1 {
  font-size: 36px;
}
#intro {
  margin: 0 auto;
  max-width: 1170px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}
#intro::before,
#intro::after {
  -webkit-animation: curtain 2s;
  -moz-animation: curtain 2s;
  -o-animation: curtain 2s;
  animation: curtain 2s;
  background-color: #152a33;
  content: "";
  left: 0;
  position: absolute;
}
#intro::before {
  top: 0;
  width: 100%;
}
#intro::after {
  bottom: 0;
  width: 100%;
}
.table {
  display: table;
  height: 100%;
  width: 100%;
}
.table .cell {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}
@-webkit-keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}
@-moz-keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}
@-o-keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}
@keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}

<section id="intro">
  <div class="table">
    <div class="cell">
      <h1>Hello world</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, beatae eius veritatis voluptate ab minus deserunt aliquam saepe, error maiores pariatur nam illo natus dolorem veniam, doloremque, expedita officiis esse.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, natus? Non aperiam eaque neque vero perspiciatis, reprehenderit eveniet quae ut omnis voluptatem architecto maxime cum quaerat dignissimos porro. Provident, magnam!</p>
    </div>
  </div>
</section>

Answer 2

因为你从一开始就给出了全高，所以伪元素之前和之后是关于顶部和底部的。如果您将代码更改为：

&::before, &::after
    -webkit-animation: curtain 2s
    -moz-animation: curtain 2s
    -o-animation: curtain 2s
    animation: curtain 2s
    background-color: #152a33
    right: 0 <!-- The change -->
    content: ''
    position: absolute
    left: 0 <!-- The change -->

也用顶部和底部改变左右:

&::before
    top: 0

&::after
    bottom: 0

最后在关键帧中更改宽度和高度，您将看到您想要的结果：

@keyframes 窗帘 0%, 50% 高度：50% 100% 身高：0

所以完整的代码是这样的：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
  font-family: "Open Sans", Helvetica, Verdana, sans-serif;
  margin: 0;
}

h1 {
  font-size: 36px;
}

#intro {
  margin: 0 auto;
  max-width: 1170px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}
#intro::before, #intro::after {
  -webkit-animation: curtain 2s;
  -moz-animation: curtain 2s;
  -o-animation: curtain 2s;
  animation: curtain 2s;
  background-color: #152a33;
  right: 0;
  content: "";
  position: absolute;
  left: 0;
}
#intro::before {
  top: 0;
}
#intro::after {
  bottom: 0;
}

.table {
  display: table;
  height: 100%;
  width: 100%;
}
.table .cell {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}

@-webkit-keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}
@-moz-keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}
@-o-keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}
@keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}

<section id="intro">
  <div class="table">
    <div class="cell">
      <h1>Hello world</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, beatae eius veritatis voluptate ab minus deserunt aliquam saepe, error maiores pariatur nam illo natus dolorem veniam, doloremque, expedita officiis esse.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, natus? Non aperiam eaque neque vero perspiciatis, reprehenderit eveniet quae ut omnis voluptatem architecto maxime cum quaerat dignissimos porro. Provident, magnam!</p>
    </div>
  </div>
</section>

更改 CSS 关键帧以从中间水平显示而不是垂直显示

Alter CSS keyframe to reveal horizontally from the middle instead of vertically

css

keyframe

css-animations