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;
}
非常感謝！