Css Chrome에서 잘 워밍업하는 애니메이션이 Safari에서 작동하지 않습니다.

저는 css transform3d 기능으로 회전 큐브를 만들고 있습니다. 크롬에서는 정상적으로 작동하지만 Safari에서는 정상적으로 작동하지 않으며 왜 잘못된 방식으로 표시되는지 알 수 없습니다.Css Chrome에서 잘 워밍업하는 애니메이션이 Safari에서 작동하지 않습니다.

이 코드의 Plunker를 생성하여 실제로이 문제를 해결할 수 있습니다. 이 코드의 이상적인 모양은 Chrome에서 확인할 수 있습니다. Chrome에서 발생하는 것과 똑같이 보이기를 원합니다.

어떤 도움도 코드를 수정하는 것뿐만 아니라 설명을 포함하여 저에게 감사 할 것입니다. 왜 작동하지 않는지에 대한 설명입니다.

Plunker

의 코드

http://plnkr.co/edit/csvtleYoWvOFccm4idcP?p=preview

HTML

<div class='welcome'> 
     <div id='animating_cube'> 
      <div class='face1'></div> 
      <div class='face2'></div> 
      <div class='face3'></div> 
      <div class='face4'></div> 
     </div> 
     <div id='message'> 
      <h1>Title</h1> 
      <span> 
      This is an animating cube. 
      </span> 
     </div> 
     </div>

CSS

.welcome { 
    position: relative; 
    width: 300px; 
    margin: 0 auto; 
    height: 300px; 
} 
.welcome #animating_cube { 
    display: block; 
    transform-style: preserve-3d; 
    transform: rotateX(-30deg) rotateY(-45deg); 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    margin: 0 auto; 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    top: 0px; 
    -webkit-animation: animatingCubeRotate 5s linear 0s infinite normal; 
    animation: animatingCubeRotate 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face1 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace1 5s linear 0s infinite normal; 
    animation: keyframeForFace1 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face2 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace2 5s linear 0s infinite normal; 
    animation: keyframeForFace2 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face3 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace3 5s linear 0s infinite normal; 
    animation: keyframeForFace3 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face4 { 
    display: block; 
    width: 150px; 
    transform-style: preserve-3d; 
    height: 150px; 
    position: absolute; 
    top: 75px; 
    left: 75px; 
    -webkit-animation: keyframeForFace4 5s linear 0s infinite normal; 
    animation: keyframeForFace4 5s linear 0s infinite normal; 
} 

.welcome #animating_cube .face1 { 
    background: #eeeeee; 
    transform: rotateX(90deg) translateZ(75px); 
    -webkit-transform: rotateX(90deg) translateZ(75px); 
} 
.welcome #animating_cube .face2 { 
    background: #cccccc; 
    transform: rotateY(90deg) translateZ(75px); 
    -webkit-transform: rotateY(90deg) translateZ(75px); 
} 
.welcome #animating_cube .face3 { 
    background: #dddddd; 
    transform: translateZ(74px); 
    -webkit-transform: translateZ(74px); 
} 
.welcome #animating_cube .face4 { 
    background: #cccccc; 
    transform: rotateY(-90deg) translateZ(75px); 
    -webkit-transform: rotateY(-90deg) translateZ(75px); 
} 
.welcome #message { 
    position: absolute; 
    width: 300px; 
    top: 70px; 
} 
.welcome #message h1 { 
    text-align: center; 
} 
.welcome #message span { 
    font-size: 13px; 
    letter-spacing: 2px; 
    text-align: center; 
} 

@-webkit-keyframes animatingCubeRotate { 
    0% { 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    } 

    100% { 
    -webkit-transform: rotateX(-30deg) rotateY(45deg); 
    } 
} 

@keyframes animatingCubeRotate { 
    0% { 
    transform: rotateX(-30deg) rotateY(-45deg); 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    } 

    100% { 
    transform: rotateX(-30deg) rotateY(-45deg); 
    -webkit-transform: rotateX(-30deg) rotateY(-45deg); 
    } 
} 

@-webkit-keyframes keyframeForFace2 { 
    0% { 
    background: #cccccc; 
    } 

    100% { 
    background: #bbbbbb; 
    } 
} 

@keyframes keyframeForFace2 { 
    0% { 
    background: #cccccc; 
    } 

    100% { 
    background: #bbbbbb; 
    } 
} 

@-webkit-keyframes keyframeForFace3 { 
    0% { 
    background: #dddddd; 
    } 

    100% { 
    background: #cccccc; 
    } 
} 

@keyframes keyframeForFace3 { 
    0% { 
    background: #dddddd; 
    } 

    100% { 
    background: #cccccc; 
    } 
} 
@-webkit-keyframes keyframeForFace4 { 
    0% { 
    background: #cccccc; 
    } 
    100% { 
    background: #dddddd; 
    } 
} 
@keyframes keyframeForFace4 { 
    0% { 
    background: #cccccc; 
    } 
    100% { 
    background: #dddddd; 
    } 
}

은 N 당신에게

출처

2015-02-05 Shunter1112