CSS动画通过变换改变位置

Question

CSS动画通过变换改变位置

3

我有一个名为announcement的

元素，我使用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;
}

看一下这个 Codepen：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);
  }
}

- dot-punto-dot

请查看此链接：http://codepen.io/anon/pen/vKgrPG；您可以通过将边距设置为自动来简单地居中；并删除左侧、转换和位置。 - Sharjeel

感谢@Sharj……虽然这样居中了，但它破坏了bottom:50px的要求。我已经在问题中澄清了该要求。 - dot-punto-dot

2个回答

0

我不知道为什么你要使用翻译，这就是在完成flipInx之后将其位置转换为定义的位置的原因，而不是把它删除并按照以下方式尝试：

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

- frnt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stickers · Accepted Answer

你可以将<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>