1
我做了一个3d立方体的缓冲区动画。它在Chrome和Firefox中运行良好，但在Safari中表现不对。我不知道究竟是什么导致了这个问题。我一直在阅读关于一些问题，Safari需要全部的百分比来理解动画，但我没有使用任何，所以这不成问题。但我想这可能是这样的。也许有人有一个想法。 :)CSS3动画越野车在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;
}
非常感谢！