Question

我做了一个3d立方体的缓冲动画。它在Chrome和Firefox中运行良好，但在Safari中表现不正常。我不知道究竟是什么导致了这个问题。我一直在阅读一些问题，其中safari需要全部百分比来理解动画，但我没有使用任何，所以这不是问题。但我想这可能就是这样的。也许有人有想法。：）

这是Css，但我也在Codepen中用笔来查看动画（http://codepen.io/Vin-ni/pen/qOoJPQ）

.buffer {
  width: 50px;
  height: 50px;
  position:absolute;
  z-index:2;
  background:#f2f2f2;
  left:50%;
  top:50%;
  -webkit-transition: ease 0.5s;
          transition: ease 0.5s;
}
.buffer:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 50px;
  left:50px;
  background: #212121;
  -webkit-transform: skewY(45deg);
          transform: skewY(45deg); 
  margin-top:5px;
    -webkit-transition: ease 0.5s;
            transition: ease 0.5s;
}
.buffer:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 10px;
  top:50px;
  background: #969696;
  -webkit-transform: skewX(45deg);
          transform: skewX(45deg);
  margin-left:5px;
  -webkit-transition: ease 0.5s;
          transition: ease 0.5s;
}

@-webkit-keyframes buffer1 {
  from {margin-top: -25px;}
    to {margin-top: -35px;}
    from {margin-left: -25px;}
    to {margin-left: -35px;}
}

@keyframes buffer1 {
  from {margin-top: -25px;}
    to {margin-top: -35px;}
    from {margin-left: -25px;}
    to {margin-left: -35px;}
}

@-webkit-keyframes buffer2 {
    from {width: 10px;}
    to {width: 20px;}
    from {margin-top: 5px;}
    to {margin-top: 10px;}
}

@keyframes buffer2 {
    from {width: 10px;}
    to {width: 20px;}
    from {margin-top: 5px;}
    to {margin-top: 10px;}
}
@-webkit-keyframes buffer3 {
    from {height: 10px;}
    to {height: 20px;}
    from {margin-left: 5px;}
    to {margin-left: 10px;}
}
@keyframes buffer3 {
    from {height: 10px;}
    to {height: 20px;}
    from {margin-left: 5px;}
    to {margin-left: 10px;}
}

.buffer{
-webkit-animation: buffer1 0.5s  infinite alternate-reverse;
        animation: buffer1 0.5s  infinite alternate-reverse;

}
.buffer:after{
-webkit-animation: buffer2 0.5s infinite alternate-reverse ;
        animation: buffer2 0.5s infinite alternate-reverse ;

}
.buffer:before{
-webkit-animation: buffer3 0.5s infinite alternate-reverse;
        animation: buffer3 0.5s infinite alternate-reverse;

}

非常感谢！

Answer 1

我找到了解决方案。 Safari在冗余关键帧方面存在问题我的解决方案是

0%   {margin-top: -25px; margin-left: -25px;}
100% {margin-top: -35px; margin-left: -35px;}

或

from {margin-top: -25px; margin-left: -25px;}
to {margin-top: -35px; margin-left: -35px;}

而不是

from {margin-top: -25px;}
to {margin-top: -35px;}
from {margin-left: -25px;}
to {margin-left: -35px;}

Safari中的CSS3动画越野车后跟＆amp;在元素之前

1 个答案: