CSS动画移动位置与变换答案

【问题标题】：CSS animation shifting position with transformCSS动画移动位置与变换
【发布时间】：2016-10-28 08:12:52
【问题描述】：

我有一个名为 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%; transform:translate(-50%,0) 居中。 编辑：请注意，我还使用bottom: 50px 将 div 定位在屏幕底部上方 50 像素处。

我的问题：我正在尝试使用取自 animate.css 的 flipInX 制作动画。元素动画，但在动画过程中它向右移动，然后在动画结束时返回到原始位置。

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

我已经提取了flipInX 的动画 CSS 并将其包含在 codepen 中：

.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);
  }
}

【问题讨论】：

检查这个：codepen.io/anon/pen/vKgrPG；您可以通过将边距设置为自动来简单地居中；并移除left、transform和position
谢谢@Sharj。 . .尽管它打破了bottom:50px 这是一个要求，但它仍将其居中。我已经在问题中阐明了该要求

标签： html css animation animate.css

【解决方案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>

【讨论】：

【解决方案2】：

我不知道你为什么要使用 translate，这就是为什么在 FlipInx 完成后它会将其位置转换为定义的位置，而不是删除它并尝试如下，

#announcement{
  position: fixed;
  bottom:50px;
  width: 340px;
  height: 90px;
  margin-left:40%;
 //transform:translate(40%,0); /*remove this*/
  ............
}

【讨论】：