CSS Трансформация: scaleX не работает в Safari

Question

У меня есть эта акула, которая плавает на моем сайте. http://jaredshurtliff.com/ Он идет вперед и назад, используя свойство CSS Transform: scaleX. Он должен идти в сторону, поворачиваться, идти на другую сторону, поворачиваться и т. Д. Он работает в каждом браузере, кроме Safari. Есть идеи?

HTML:

<div id="shark"> 
     <div id="shark_body"></div> 
     <div id="shark_fin"></div> 
    </div> 

CSS:

#shark { 
width: 500px; 
height: 220px; 
position: absolute; 
top: 75%; 
left: 20%; 
padding: 0; 

animation-name:swim; 
animation-duration:50s; 
animation-iteration-count:infinite; 
animation-timing-function: linear; 

-moz-animation-name:swim; 
-moz-animation-duration:50s; 
-moz-animation-iteration-count:infinite; 
-moz-animation-timing-function: linear; 

-webkit-animation-name:swim; 
-webkit-animation-duration:50s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function: linear; 

}

А вот анимация (я просто отобразить -webkit- часть:

@-webkit-keyframes swim{ 
from{ 
    left: 20%; 
} 
20%{ 
    left:1%; 
    transform:scaleX(1); 
} 
20.5%{ 
    transform:scaleX(-1); 
    left:0%; 
} 
21%{ 
    left: 5%; 
} 
50%{ 
    left: 55%; 
    transform:scaleX(-1); 
} 
50.5%{ 
    transform:scaleX(1); 
    left: 58%; 
} 
51%{ 
    left: 53%; 
} 
70%{ 
    left: 1%; 
    transform:scaleX(1); 
} 
70.5%{ 
    transform:scaleX(-1); 
    left:0%; 
} 
71%{ 
    left: 5%; 
} 
82%{ 
    left: 55%; 
    transform:scaleX(-1); 
} 
82.5%{ 
    transform:scaleX(1); 
    left: 58%; 
} 
83%{ 
    left: 53%; 
} 
to{ 
    left:20%; 
} 

}

Answer 1

я думаю, что вы забыли добавить префикс для webkit и других браузеров в @keyframes

-webkit-transform:scaleX(1); 
    -moz-transform:scaleX(1); 
    -ms-transform:scaleX(1); 
    -o-transform:scaleX(1); 
    transform:scaleX(1);