Question

我正在尝试使页面加载转换有效div。这是我在codepen.io上的DEMO FULL PAGE完整页面，这也是包含代码 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。我的更改摘要：

在text-align: center上添加.testtransition以保持图片居中
为动画添加了width，height和padding，让图片在整个动画中居中
从width标记中删除了img参数，以简化操作：）

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

2 个答案: