过渡动画需要一些CSS

Question

我正在尝试使页面加载转换有效 div。这是我的 DEMO FULL PAGE full page from codepen.io and also this is example page with code DEMO WITH 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

Here's a working pen。我的更改摘要：

在 .testtransition 上添加了 text-align: center 以保持图像居中
在动画中添加了 width、height 和 padding 以使图像在整个动画中居中
从 img 标签中删除了 width 参数以保持简单:)

Answer 2

这应该可以解决问题！每个动画都需要设置from和to。

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

您可能需要尝试使用初始图像来保持吸引人的圆圈，现在我已经添加了背面可见性。

过渡动画需要一些CSS

Transition animation need some CSS

html

css

css-transitions

transition