html - CSS 动画移动位置与变换

Question

我有一个名为 announcement 的 div 元素，我用 CSS 对其进行了定位:

#announcement{
  position: fixed;
  bottom:50px;
  width: 340px;
  height: 90px;
  left: 50%;
  transform:translate(-50%,0);
  z-index:3;
  font-family: Courier, monospace;
  font-size:15px;  
  font-weight:400;
  line-height:1.6;
}

查看此代码笔:http://codepen.io/martellalex/pen/WxGjeX

body {
  box-sizing: border-box
}
#announcement {
  position: fixed;
  bottom: 50px;
  width: 340px;
  height: 90px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
  font-family: Courier, monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
#announcement-1 {
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 7%, 0.85);
  border-radius: 45px;
  color: #fff;
  box-shadow: 0 0 5px 0 hsla(0, 0%, 7%, 0.35)l
}
#announcement-1-1 {
  float: left;
  width: 64px;
  margin-top: 13px;
  margin-left: 15px;
}
#announcement-1-1-1 {
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  background-color: transparent;
}
#announcement-1-1-1-1 {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
}
#announcement-1-2 {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  width: 210px;
}
#announcement-1-2 h4 {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
}
#announcement-1-2 p {
  color: #999;
  line-height: 1.1;
  margin-top: 3px;
  font-size: 12px;
  margin: 0;
  padding: 0;
  display: block;
}
#announcement-1-2-3 {
  position: absolute;
  bottom: 8px;
  font-size: 12px;
}
#announcement-1-2-3-1 {
  color: #fff
}
#announcement-1-2-3-2 {
  font-family: Courier, monospace;
  font-size: 12px;
  font-weight: 400;
  background: none;
  border: 0;
  text-decoration: underline;
  color: #fff;
}
.run-animation.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX 1s;
  animation: flipInX 1s;
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

<div id='announcement' class='run-animation flipInX'>
  <div id='announcement-1'>
    <div id='announcement-1-1'>
      <a href="https://google.com" title="More info" id="announcement-1-1-1">
        <img id="announcement-1-1-1-1" src="https://images.unsplash.com/announcement-1466017995174-05cef779d74b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&fit=crop&h=128&w=128&s=834e52d3266c089e2260f3029e801ad1" alt="" />
      </a>
    </div>
    <div id='announcement-1-2'>
      <h4>Buy this book</h4>
      <p>Awesome reason why.</p>
      <div id="announcement-1-2-3">
        <a href="https://google.com" id='announcement-1-2-3-1'>More info</a>
        <button id="announcement-1-2-3-2">Dismiss</button>
      </div>
    </div>
  </div>
</div>

请注意，我使用 left: 50%; 居中变换:翻译(-50%，0)。 编辑:请注意，我还使用 bottom: 50px 将 div 定位在屏幕底部上方 50px 处。

我的问题:我正在尝试使用取自 animate.css 的 flipInX 制作动画。该元素会进行动画处理，但在动画期间它向右移动，然后在动画结束时返回到原始位置。

如何让它在动画期间保持在居中位置？

我已经提取了 flipInX 的动画 CSS 并将其包含在代码笔中:

.run-animation.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;  
  -webkit-animation-name: flipInX 1s;  
  animation: flipInX 1s;
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

Answer 1

你可以包装<div id='announcement'>到另一个 div，例如

<div id='announcement-wrapper'>
  <div id='announcement' class='run-animation flipInX'>
    ...
  </div>
</div>

并将相关样式移动到包装器 div，以便动画只发生在 #announcement 上不是包装器。

body {
  box-sizing: border-box
}
#announcement-wrapper {
  position: fixed;
  bottom: 50px;
  width: 340px;
  height: 90px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
  font-family: Courier, monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
#announcement {
  height: inherit;
}
#announcement-1 {
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 7%, 0.85);
  border-radius: 45px;
  color: #fff;
  box-shadow: 0 0 5px 0 hsla(0, 0%, 7%, 0.35);
}
#announcement-1-1 {
  float: left;
  width: 64px;
  margin-top: 13px;
  margin-left: 15px;
}
#announcement-1-1-1 {
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  background-color: transparent;
}
#announcement-1-1-1-1 {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
}
#announcement-1-2 {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  width: 210px;
}
#announcement-1-2 h4 {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
}
#announcement-1-2 p {
  color: #999;
  line-height: 1.1;
  margin-top: 3px;
  font-size: 12px;
  margin: 0;
  padding: 0;
  display: block;
}
#announcement-1-2-3 {
  position: absolute;
  bottom: 8px;
  font-size: 12px;
}
#announcement-1-2-3-1 {
  color: #fff
}
#announcement-1-2-3-2 {
  font-family: Courier, monospace;
  font-size: 12px;
  font-weight: 400;
  background: none;
  border: 0;
  text-decoration: underline;
  color: #fff;
}
.run-animation.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX 1s;
  animation: flipInX 1s;
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

<div id='announcement-wrapper'>
  <div id='announcement' class='run-animation flipInX'>
    <div id='announcement-1'>
      <div id='announcement-1-1'>
        <a href="https://google.com" title="More info" id="announcement-1-1-1">
          <img id="announcement-1-1-1-1" src="https://images.unsplash.com/announcement-1466017995174-05cef779d74b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&fit=crop&h=128&w=128&s=834e52d3266c089e2260f3029e801ad1" alt="" />
        </a>
      </div>
      <div id='announcement-1-2'>
        <h4>Buy this book</h4>
        <p>Awesome reason why.</p>
        <div id="announcement-1-2-3">
          <a href="https://google.com" id='announcement-1-2-3-1'>More info</a>
          <button id="announcement-1-2-3-2">Dismiss</button>
        </div>
      </div>
    </div>
  </div>
</div>