Hoạt ảnh CSS3 không hoạt động ở safari

Question

Tôi có một chút hoạt ảnh CSS3 hoạt động hoàn hảo trong tất cả trình duyệt hỗ trợ CSS3 ngoại trừ safari. Lạ thật phải không? Ok đây là mã của tôi:

HTML

<div class="right"> 
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div> 
</div> 

CSS

.landing .board .right { 
    width: 291px; 
    height: 279px; 
    background: url('../images/landing/key-pnl.png'); 
    bottom: 16px; 
    right: 250px; 
    position: absolute; 
} 
.landing .board .right .key-arm { 
    position: absolute; 
    left: 44px; 
    top: 18px; 
    width: 41px; 
    height: 120px; 
} 



/*=== Key Arm Animation ===*/ 
@-webkit-keyframes keyarm { 
    0% { -webkit-transform: rotate(0deg); } 
    5% { -webkit-transform: rotate(-14deg); } 
    10% { -webkit-transform: rotate(0deg); } 
} 

@-moz-keyframes keyarm { 
    0% { -moz-transform: rotate(0deg); } 
    5% { -moz-transform: rotate(-14deg); } 
    10% { -moz-transform: rotate(0deg); } 
} 

@-ms-keyframes keyarm { 
    0% { -ms-transform: rotate(0deg); } 
    5% { -ms-transform: rotate(-14deg); } 
    10% { -ms-transform: rotate(0deg); } 
} 

@-o-keyframes keyarm { 
    0% { -o-transform: rotate(0deg); } 
    5% { -o-transform: rotate(-14deg); } 
    10% { -o-transform: rotate(0deg); } 
} 

@keyframes keyarm{ 
    0% { transform: rotate(0deg); } 
    5% { transform: rotate(-14deg); } 
    10% { transform: rotate(0deg); } 
} 


.right .key-arm{ 
    -webkit-transform-origin: 12px 105px; 
     -moz-transform-origin: 12px 105px; 
     -ms-transform-origin: 12px 105px; 
     -o-transform-origin: 12px 105px; 
      transform-origin: 12px 105px; 

    -webkit-animation: keyarm 8s ease-in-out 0s infinite; 
     -moz-animation: keyarm 8s ease-in-out 4s infinite; 
     -ms-animation: keyarm 8s ease-in-out 4s infinite; 
     -o-animation: keyarm 8s ease-in-out 4s infinite; 
      animation: keyarm 8s ease-in-out 0s infinite; 
} 

Ok này không hoạt động trong Safari như tôi đã nói, không có chuyển động nào.
Ngoài ra, vẫn còn và chỉ trong Safari, div khóa tay chỉ hiển thị nếu bạn thay đổi kích thước màn hình! Nó có trong DOM nhưng vì lý do nào đó nó không xuất hiện!
Tôi đang làm gì sai?

Cảm ơn
Mauro

UPDATE: Ok từ câu trả lời của bạn tôi đã nhận rằng @keyframes không được hỗ trợ trên Safari 4. Thật kỳ lạ vì trên cùng một trang Tôi có một hình ảnh động mà làm việc sử dụng @keyframes!

đây là các mã CSS:

.board .rays{ 
    background: url("../images/landing/rays.gif") no-repeat 0 0 red; 
    height: 381px; 
    left: 251px; 
    opacity: 1; 
    top: 80px; 
    width: 408px; 
    position: absolute; 
} 

.board .bottle{ 
    background: url("../images/landing/bottle.gif") no-repeat 0 0 lime; 
    bottom: 30px; 
    height: 405px; 
    left: 276px; 
    width: 357px; 
    z-index: 1; 
    position:absolute; 
} 

/*=== Rays Animation ===*/ 
@-webkit-keyframes rays{ 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 
@-moz-keyframes rays{ 
    0% { -moz-transform: rotate(0deg); } 
    100% { -moz-transform: rotate(360deg); } 
} 

.board .rays{ 
    -webkit-animation: rays 40s linear 0s infinite; 
    -moz-animation: rays 40s linear 0s infinite; 
    animation: rays 40s linear 0s infinite; 
} 

Và html:

<div class="board"> 
    <div class="rays"></div> 
    <div class="bottle"></div> 
</div> 

Hãy thử nó cho mình trong jsFiddle (nếu bạn có Safari 4) và bạn sẽ thấy

Answer 1

Tìm thấy sự dung dịch. Trong Safari khi bạn sử dụng Khung hình bạn cần phải sử dụng toàn bộ phần trăm:

này sẽ không làm việc:

@-webkit-keyframes keyarm { 
    0% { -webkit-transform: rotate(0deg); } 
    5% { -webkit-transform: rotate(-14deg); } 
    10% { -webkit-transform: rotate(0deg); } 
} 

này sẽ:

@-webkit-keyframes keyarm { 
    0% { -webkit-transform: rotate(0deg); } 
    5% { -webkit-transform: rotate(-14deg); } 
    10% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 

Không biết tại sao nhưng đó là cách Safari hoạt động! :)

Answer 2

Tôi gặp sự cố với hoạt ảnh CSS3 hoạt động trong Safari 6, chứ không phải trong Safari 4 (4.0.5).

Dường như các ký hiệu viết tắt sẽ không làm việc trong Safari 4.

Vì vậy, điều này sẽ không làm việc:

-webkit-animation: rays 40s linear forwards; 

Nhưng điều này sẽ làm việc:

-webkit-animation-name: rays; 
-webkit-animation-duration: 40s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: linear; 
-webkit-animation-fill-mode: forwards; 

Answer 3

@-webkit-keyframes { <- let this symbol to the same line 
} - > 

Tính năng này hoạt động trên iphone 3 ios 6.1.6 với tiền tố -webkit- về biến đổi và hoạt ảnh n

Answer 4

Trong tình huống mà bạn đang cố gắng để animate transform trên một cái gì đó như ngay khi nó được tiêm vào DOM, tôi đã có thêm một sự chậm trễ rất ngắn, như thế này:

animation: rays 40s linear 0.01s infinite;