过渡动画需要一些CSS

Question

我正在尝试使页面负载过渡有效div。这是我的演示完整页面来自Codepen.io的完整页面，这是示例页面，带有代码 and code

的演示页面

如果您打开了演示完整页面，则可以看到有一个图像，并且此图像打开了带有过渡动画的图像。但是出了点问题。

页面加载图像打开过渡时，但是它正在开放到底部。我想在中间打开它，而不会偏离。

有人可以在这方面帮助我吗？我该如何修复？

这是我的CSS代码：

.test {
  margin: 0px auto;
  width: 200px;
  height: auto;
  margin-top: 50px;
}
.testtransition {
  transform: scale(1.2);
  width: 200px;
  height: 200px;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
  border-radius: 50%;
}
.testtransition img {
  width: 100%;
  max-width: 200px;
  max-height: 200px;
  opacity: 1;
  -moz-animation: scale 0.8s;
  /* Firefox */
  -webkit-animation: scale 0.8s;
  /* Safari and Chrome */
  -o-animation: scale 0.8s;
  border-radius: 50%;
  -webkit-animation: scale 0.9s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: scale 0.9s;
  /* Firefox < 16 */
  -ms-animation: scale 0.9s;
  /* Internet Explorer */
  -o-animation: scale 0.9s;
  /* Opera < 12.1 */
  animation: scale 0.9s;
}
@keyframes scale {
  from {
    width: 20px;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}
@-moz-keyframes scale {
  /* Firefox */
  from {
    width: 20px;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}
@-webkit-keyframes scale {
  /* Safari and Chrome */
  from {
    width: 20px;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}
@-o-keyframes scale {
  /* Opera */
  from {
    width: 20px;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}

Answer 1

这是工作笔。我的更改摘要：

• 在.testtransition上添加text-align: center以保持图像为中心
• 将width，height和padding添加到动画中，以使图像保持在整个动画中
• 从img标签中删除width参数以保持简单：）

Answer 2

这应该可以解决问题！您需要在每个动画中设置一个。

http://codepen.io/anon/pen/gjzvjb

.testtransition {
  width: 200px;
  height: 200px;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
.testtransition img {
  -webkit-animation: scaleAnim 1s;
  -moz-animation: scaleAnim 1s;
  -o-animation: scaleAnim 1s;
}
@-webkit-keyframes scaleAnim {
  from { -webkit-transform: scale(0) }
  to { -webkit-transform: scale(1) }
}
@-moz-keyframes scaleAnim {
  from { -moz-transform: scale(0) }
  to { -moz-transform: scale(1) }
}
@-o-keyframes scaleAnim {
  from { -o-transform: scale(0)}
  to { -o-transform: scale(1)}
}

您可能必须使用初始图像才能保持一个有吸引力的圆圈，因为现在我添加了Backface-Visibil。