VEGAS2.4.0を使ってズームアウト設定にすると画像が切り替わるタイミングで100%の画像が一瞬表示されてしまう。

宜しくお願い致します。

http://vegas.jaysalvat.com/
上記サイトのVEGAS2.4.0をダウンロードし、

下記ソースで設定をしました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="vegas.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="vegas.js"></script>
<script>
$(function(){
    $("body").vegas({
        slides: [
            { src: "bg1.jpg" },
            { src: "bg2.jpg" },
            { src: "bg3.jpg" }
        ],
        transition: 'fade',
        animation: 'kenburns'
    });
});
</script>
</body>
</html>

そのままだと、画像がズームアウトしていく動きになるのですが
ズームインの動きにしたく、

vegas.cssの

@-webkit-keyframes kenburns {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);
    }
}

@keyframes kenburns {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);
    }

を

@-webkit-keyframes kenburns {
    0% {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes kenburns {
    0% {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

に変更しました。

すると、ズームインの動きにはなったのですが、
画像が切り替わるタイミングで
一瞬100％の大きさの画像が表示され、画像が切り替わるようになってしまいました。

余分なソースコードをなくし、ミニマムの状態にしても改善されないため
どうしようもなくなってしまいました。

画像が切り替わるタイミングで、「100％の大きさの画像」が表示されず、
スムーズに画像を切り替えるにはどこを修正すれば良いのかご教授お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

NOTE:
下記の回答は動作確認を行っていません.

キーフレームkenburnsを参照しているanimationプロパティにanimation-fill-mode:forwards(アニメーション終了時の値を維持する)を追加して下さい.

CSS
1.vegas-animation-kenburns {
2    -webkit-animation: kenburns ease-out forwards;/*←ここに追加*/
3            animation: kenburns ease-out forwards;/*←ここに追加*/
4}
5
6@-webkit-keyframes kenburns {
7    0% {
8        -webkit-transform: scale(1);
9                transform: scale(1);
10    }
11    100% {
12        -webkit-transform: scale(1.5);
13                transform: scale(1.5);
14    }
15}
16
17@keyframes kenburns {
18    0% {
19        -webkit-transform: scale(1);
20                transform: scale(1);
21    }
22    100% {
23        -webkit-transform: scale(1.5);
24                transform: scale(1.5);
25    }
26}