web-dev-qa-db-ja.com

animate.cssアニメーション速度制御

animate.cssでアニメーションの速度を制御しようとしています。これが私のコードですが、残念ながら制御できません。

これをどのように制御できるか誰でも説明できますか？

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}
jqueryhtmlcssanimation
11
Abdul Basit

Animate.cssは、いくつかの速度制御クラスを実装しています。

https://github.com/daneden/animate.css#slow-slower-fast-and-faster-class

デフォルト（クラスなし）= 1s
遅い= 2秒
遅い= 3秒
高速= 800ミリ秒
高速= 500ミリ秒

使用例：

<p class="animated slideOutLeft faster">This will slide out with a duration of 500ms.</p>
3
ffffff

animation-durationに.slideOutLeftを定義する必要があります。

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

または省略形（すべてのブラウザ接頭辞付き）：

.slideOutLeft {
  -webkit-animation: slideOutLeft 5s; /* Safari 4+ */
  -moz-animation:    slideOutLeft 5s; /* Fx 5+ */
  -o-animation:      slideOutLeft 5s; /* Opera 12+ */
  animation:         slideOutLeft 5s; /* IE 10+, Fx 29+ */
}

詳細については、こちらをご覧ください ここ

21
LinkinTED

.animatedクラスを使用して、すべてのアニメーション期間をグローバルに変更できます。たとえば、ここでは0.6秒に変更し、うまく機能しました。

.animated {
   -webkit-animation-duration: 0.6s;
   animation-duration: 0.6s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
9
Arash Esmaeili

Animate.cssのドキュメントをよく見ると、これはあなたがこれを行うことができると単純に言っています：

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

参照： https://github.com/daneden/animate.css#usage

2
Alexander Kimaru

CSSファイルから変更したくない場合は、javascriptを使用してその要素スタイルを直接変更できます。

$.fn.extend({
  animateCSS: function(animationName, callback, duration) {
    var animationEnd = {
      animation: 'animationend',
      OAnimation: 'oAnimationEnd',
      MozAnimation: 'mozAnimationEnd',
      WebkitAnimation: 'webkitAnimationEnd',
    };

    for (var t in animationEnd)
      if (this[0].style[t] !== undefined){
        animationEnd = animationEnd[t];
        break;
      }

    if(duration)
      this.css('-webkit-animation-duration', duration+'s')
        .css('animation-duration', duration+'s');

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if(duration)
        $(this).css('-webkit-animation-duration', '')
          .css('animation-duration', '');

      if (typeof callback === 'function') callback();
    });

    return this;
  }
});
0
StefansArya

持続時間の処理については、 CSSアニメーション持続時間 / CSS遷移持続時間 を参照してください。遅延のためのアニメーション/遷移遅延もあります。

0
mxlse