jQueryのcss3「keyframe」がブラウザsafari(PC,iPhone)のみcssを取得しない

Question

実現しないことは、以下のソースでfirefox、chrome、IEでは問題なく動作するのですが、
safari(PC,iphone)ではcssの取得がされません。

原因が分かる方、ご教授いただけますでしょうか。

keyframeは、別途cssに記載しております。

   $(function () { 
$('.thumb-1').css({ 
     'animation': 'move1 25s ease-in-out -' + Math.random() * 25 + 's infinite alternate forwards running',
     '-webkit-animation': 'move1 25s ease-in-out -' + Math.random() * 25 + 's infinite alternate forwards running'});    
});  

.thumb-1{
   position:absolute;
   top:-100px;
   left:-200px;
   
}

Answer 1

$(function() {

$('.thumb-1').css({
'-webkit-animation-name':'move1',
'-webkit-animation-duration':'25s',
'-webkit-animation-timing-function':'ease-in-out',
'-webkit-animation-delay':' -' + Math.random() * 20 + 's ',
'-webkit-animation-iteration-count':'infinite',
'-webkit-animation-direction':'alternate',
'-webkit-animation-fill-mode':'forwards',
'-webkit-animation-play-state':'running',
'animation-name':'move1',
'animation-duration':'25s',
'animation-timing-function':'ease-in-out',
'animation-delay':' -' + Math.random() * 20 + 's ',
'animation-iteration-count':'infinite',
'animation-direction':'alternate',
'animation-fill-mode':'forwards',
'animation-play-state':'running'});

$('.thumb-2').css({
'-webkit-animation': 'move2 20s ease -' + Math.random() * 20 + 's infinite alternate forwards running',
'animation': 'move2 20s ease -' + Math.random() * 20 + 's infinite alternate forwards running'});

$('.thumb-3').css({
'-webkit-animation': 'move3 30s ease-in-out -' + Math.random() * 30 + 's infinite alternate forwards running',
'animation': 'move3 30s ease-in-out -' + Math.random() * 30 + 's infinite alternate forwards running'});

$('.thumb-4').css({
'-webkit-animation': 'move4 30s ease-in-out -' + Math.random() * 30 + 's infinite alternate forwards running',
'animation': 'move4 30s ease-in-out -' + Math.random() * 30 + 's infinite alternate forwards running'});

$('.thumb-5').css({
'-webkit-animation': 'move5 30s ease-in-out -' + Math.random() * 30 + 's infinite alternate forwards running',
'animation': 'move5 30s ease-in-out -' + Math.random() * 30 + 's infinite alternate forwards running'});

$('.thumb-6').css({
'-webkit-animation': 'move6 21s ease-in-out -' + Math.random() * 21 + 's infinite alternate forwards running',
'animation': 'move6 21s ease-in-out -' + Math.random() * 21 + 's infinite alternate forwards running'});

$('.thumb-7').css({
'-webkit-animation': 'move7 36s ease-in-out -' + Math.random() * 36 + 's infinite alternate forwards running',
'animation': 'move7 36s ease-in-out -' + Math.random() * 36 + 's infinite alternate forwards running'});

});

Answer 2

同様の質問で、「keyframesを0%から100%まで全て記述していないから動かない」という回答がされておりました。ご確認ください。（this won't work:とthis will:の部分）

• CSS3 animation not working in safari

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。

keyframesは、別途記述しているのですが、safariのみjsを読み込んでくれず、cssでのabsoluteの位置からkeyframeが開始してしまう状況でございます。

chrome、firefoxは問題なく動作しております。

[退会済みユーザー]

jQueryでcssを付与する際に、プロパティを省略形で書くとsafariで付与されないという情報がありました。

その際に、省略形で記載せず、以下のように記載しましたが、jQueryのcssを取得されませんでした。

//move1
$(function () {
return $('.thumb-1').css({
'-webkit-animation-name':'move1',
'-webkit-animation-duration':'25s',
'-webkit-animation-timing-function':'ease-in-out',
'-webkit-animation-delay':' -' + Math.random() * 20 + 's ',
'-webkit-animation-iteration-count':'infinite',
'-webkit-animation-direction':'alternate',
'-webkit-animation-fill-mode':'forwards',
'-webkit-animation-play-state':'running',
'animation-name':'move1',
'animation-duration':'25s',
'animation-timing-function':'ease-in-out',
'animation-delay':' -' + Math.random() * 20 + 's ',
'animation-iteration-count':'infinite',
'animation-direction':'alternate',
'animation-fill-mode':'forwards',
'animation-play-state':'running'

});

記載にミスがあるか、ご教授いただけますでしょうか。
よろしくお願いします。

[退会済みユーザー]

すみません、上記でsafariでも無事解説いたしました。