6

ここに素敵な CSS アニメーションがあるので、ループさせたいと思います。

悲しいことに、私は CSS アニメーションの経験がほとんどなく、これを行う方法がわかりません。ここで誰かが私を少し助けてくれたら本当にありがたいです。ありがとうございました！

HTML

<div id="msg">Weeeeeee</div>

Javascript

$("#msg").click(function() {
    var duration = 1400;
    $msg = $(this);
    $msg.css("-webkit-transform", "scale(2)")
        .css("-webkit-transition-timing-function", "ease-out")
        .css("-webkit-transition-duration", duration + "ms");
    setTimeout(function () {
        $msg.css("-webkit-transform", "scale(1)")
            .css("-webkit-transition-timing-function", "ease-in")
            .css("-webkit-transition-duration", duration + "ms");
    }, duration);
});

CSS

#msg { font-size: 40pt; font-weight:bold; text-align:center; line-height: 120pt; }
4

3 に答える 3

11

Praveen のソリューションは、あなたが求めていたものに近いはずですが、トランジションをアニメーション化するために jQuery を使用する代わりに、CSS3 アニメーションを使用するソリューションを提供します。IMOは、維持と理解がより簡単です:

CSS

@-webkit-keyframes foo {
  from {
    -webkit-transform:scale(1);
  }
  to {
    -webkit-transform:scale(2);
  }
}

次にJS：

$("#msg").click(function() {
    var duration = 1400;
    $msg = $(this);
    //syntax is: animation-name animation-duration[ animation-timing-function][ animation-delay][ animation-iteration-count][ animation-direction]
    $msg.css("animation", "foo " + duration + "ms ease infinite alternate");
});

フィドル

上記ではオプションのパラメーターを使用しませんでしたがanimation-delay、残りは非常に簡単です。infinite方向のある反復回数は、アニメーションを削除するために呼び出すまでalternate、アニメーションの方向を (fromからto)から (toから) に無期限に交互にアニメーションを実行します。from$msg.css("animation", "")

ps。jQuery 1.8+ では、JS でプレフィックスが自動的に付けられます。
もちろん、Webkit 以外のブラウザーで動作するようにするには、CSS にプレフィックスを付ける必要があります。Prefixrがそれを行う必要があります。

プレフィックス付きの CSS をいじる。

于 2013-01-13T19:19:42.433 に答える
0

内部にすべてをカプセル化setInterval()

var duration = 1400;
$msg = $(this);
setInterval(function(){
    $msg.css("-webkit-transform", "scale(2)")
        .css("-webkit-transition-timing-function", "ease-out")
        .css("-webkit-transition-duration", duration + "ms");
    setTimeout(function () {
        $msg.css("-webkit-transform", "scale(1)")
            .css("-webkit-transition-timing-function", "ease-in")
            .css("-webkit-transition-duration", duration + "ms");
    }, duration);
}, duration);

これは役に立ちますか？はい、間違っていたら訂正してください...

于 2013-01-13T19:16:34.963 に答える