Question

编辑：发生在IE10，Win 7

我正在使用变换将元素水平放置并在动画期间，因为我使用变换更新垂直，我也将水平设置为与之前相同的值，但它会移动！

尽管价值相同，为什么它会水平变化？

HTML：

<div class="p">
  <div class="c">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Circle-yellow.svg/1024px-Circle-yellow.svg.png" />
  </div>
</div>

JavaScript的：

document.querySelector( "img" ).onclick = function(event) {
  event.target.className = "test";
}

CSS：

html, body
{
  height: 100%;
}
.p
{
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  z-index: 2;
}
.c
{
  position: absolute;
  left: 0;
    top: 0%;
    height: 20%;
    width: 50%;
    text-align: center;
    display: block;
}

.c img
{
      position: absolute;
      top: 35%;
      left: 50%;
      -webkit-transform: translate(-50%,0em) perspective(1px);
      -ms-transform: translate(-50%,0em) perspective(1px);
      transform: translate(-50%,0em) perspective(1px);
      height: 40%;
      margin-left: auto;
      margin-right: auto;
      display: block;
}

@keyframes test
{
  0%, 50%, 100%
  {
    transform: translate(-50%,0em);
    -webkit-transform: translate(-50%,0em);
    -moz-transform: translate(-50%,0em);
  }

  25%
  {
    transform: translate(-50%,-.5em);
    -webkit-transform: translate(-50%,-.5em);
    -moz-transform: translate(-50%,-.5em);
  }

  75%
  {
    transform: translate(-50%,.5em);
    -webkit-transform: translate(-50%,.5em);
    -moz-transform: translate(-50%,.5em);
  }
}

.c img.test
{
  -webkit-animation-name: test;
  -moz-animation-name: test;
  animation-name: test;
  -webkit-animation-duration: 400ms;
  -moz-animation-duration: 400ms;
  animation-duration: 400ms;
  -webkit-animation-iteration-count: 3;
  -moz-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: none;
  -moz-animation-fill-mode: none;
  animation-fill-mode: none;
}

Answer 1

删除perspective上未使用的.c img转换以修复动画。

-webkit-transform: translate(-50%,0em) perspective($perspective);
-ms-transform: translate(-50%,0em) perspective($perspective);
transform: translate(-50%,0em) perspective($perspective);

变为：

-webkit-transform: translate(-50%,0em);
-ms-transform: translate(-50%,0em);
transform: translate(-50%,0em);

Answer 2

正如@JonUleis指出的那样，似乎IE 10中存在一个错误（在Win 7上），其中具有多次迭代的动画在迭代之间具有瞬间不设置元素的样式。这可能导致昙花一现和奇怪的动作。

唯一的解决方案是进行1次迭代并使用百分比来模拟多次迭代。 这意味着你无法无限地完成

https://jsfiddle.net/kr0qz5b2/17/

@keyframes test
{
  0%, 22%, 44%, 66%, 88%
  {
    transform: translate(-50%,0em);
    -webkit-transform: translate(-50%,0em);
    -moz-transform: translate(-50%,0em);
  }

  11%, 55%
  {
    transform: translate(-50%,-.5em);
    -webkit-transform: translate(-50%,-.5em);
    -moz-transform: translate(-50%,-.5em);
  }

  33%, 77%
  {
    transform: translate(-50%,.5em);
    -webkit-transform: translate(-50%,.5em);
    -moz-transform: translate(-50%,.5em);
  }
}

.c img.test
{
  -webkit-transform: translate(-50%,0em);
  -ms-transform: translate(-50%,0em);
  transform: translate(-50%,0em);
  -webkit-animation-name: test;
  -moz-animation-name: test;
  animation-name: test;
  -webkit-animation-duration: 1000ms;
  -moz-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

为什么这个元素在CSS动画期间水平移动（仅在IE中）？

2 个答案: