Safari 中的 CSS3 动画错误，带有 after 和 before 元素答案

【问题标题】：CSS3 Animation buggy in Safari with after & before elementsSafari 中的 CSS3 动画错误，带有 after 和 before 元素
【发布时间】：2015-10-27 18:04:42
【问题描述】：

我制作了一个 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;

}

非常感谢！

【问题讨论】：

标签： css animation safari webkit

【解决方案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;}

【讨论】：