如何使用 CSS 为旋转的 DOM 元素设置动画

Question

我有以下 HTML:

<section class="cd-intro">
  <div class="cd-intro-content mask-2">
    <div class="content-wrapper">
      <div class="inner">
        <h1>Animated Intro Section</h1>
        <p>A collection of text effects for the intro section of your website</p>
        <div class="action-wrapper">
          <a href="#0" class="cd-btn main-action">Get started</a>
          <a href="#0" class="cd-btn">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>

具有以下 CSS：

.mask-2.cd-intro-content .content-wrapper {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 2em 0;
  overflow: hidden;
  transform:rotate(45deg);
  background-color: #0F0;
}
.mask-2.cd-intro-content .content-wrapper .inner{
    transform:rotate(-45deg);
    background-color: #F00;
}
.mask-2.cd-intro-content .content-wrapper > div {
  position: relative;
  z-index: 1;
}

.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
  animation-duration: 3.5s;
  animation-delay: 1.1s;
  animation-fill-mode: backwards;
}

.mask-2.cd-intro-content .content-wrapper {
  animation-name: cd-mask-wrapper;
}

.mask-2.cd-intro-content .content-wrapper > div {
  animation-name: cd-mask-content;
}
@keyframes cd-mask-wrapper {
  0% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes cd-mask-content {
  0% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

一切都像一个魅力：除了 transform:rotate(45deg); 上的旋转仅在动画之后生效。这是为什么？如何在动画之前旋转它？

我的想法是用对角线而不是垂直线显示内容。

Answer 1

您必须在转换时声明所有内容。但你也必须注意平移将被旋转，所以借助几何的超能力你可以做到这一点：

@keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%) rotate(45deg);
-moz-transform: translateX(50%) rotate(45deg);
-ms-transform: translateX(50%) rotate(45deg);
-o-transform: translateX(50%) rotate(45deg);
transform: translateX(50%) rotate(45deg);
}
100% {
-webkit-transform: translateX(0) rotate(45deg);
-moz-transform: translateX(0)  rotate(45deg);
-ms-transform: translateX(0) rotate(45deg);
-o-transform: translateX(0) rotate(45deg);
transform: translateX(0) rotate(45deg);
}
}
@keyframes cd-mask-content {
0% {
-webkit-transform:  rotate(-45deg) translateX(-100%);
-moz-transform: rotate(-45deg) translateX(-100%);
-ms-transform:  rotate(-45deg) translateX(-100%);
-o-transform:  rotate(-45deg) translateX(-100%);
transform:  rotate(-45deg) translateX(-100%);
}
100% {
-webkit-transform: rotate(-45deg) translateX(0);
-moz-transform rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
-o-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
}

是的。翻译然后旋转包装器很重要。然后旋转然后翻译内容。测试一下 =)

如何使用 CSS 为旋转的 DOM 元素设置动画

How to animate a rotated DOM element with CSS

css

keyframe

css-animations