重置CSS3动画

Question

当我们滚动到视图中时，我正在设置一个或多个DIV的动画。我这样做是通过将动画css分成几个类（见下文）。

动画DIV最初将包含“ .mpact-animated ”和“ .mpact-animated-pause ”类。 DIV还将具有以下类别之一' .mpact-shake '，' .mpact-heartbeat '或' .mpact-bounce ”。这些动画类由用户选择，因此我不知道要实现哪个。

当页面滚动时，通过Javascript（见下文）检查DIV以查看它们是否已滚动到视图中。如果他们已删除“ .mpact-animated-pause ”类，则会添加“ .mpact-animated-play ”类。当DIV向外滚动时，“ .mpact-animated-play ”类将被删除，并且会添加“ .mpact-animated-pause ”类。

当DIV第一次滚动到视图中时，这确实按计划工作，而不是DIV滚动到视图的后续时间。

如何重置动画，以便在DIV滚出视图然后返回视图后重新运行？

注：的 样本div中的内联样式也由用户选择。

动画CSS

.mpact-animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.mpact-animated-play {
    animation-play-state: running !important;
}

.mpact-animated-pause {
    animation-play-state: paused !important;
}    
.mpact-shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.mpact-heartbeat {
  -webkit-animation-name: heartbeat;
  animation-name: heartbeat;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
}

.mpact-bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
}

@keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }

@keyframes heartbeat { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

@keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } }

JS

function mpactIsInView(elem) {
    var $elem = jQuery(elem);

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = jQuery(scrollElem).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function mpactCheckAnim() {    
    jQuery( ".mpact-sidebar-cta.cta-container" ).each(function( index, element ) {
        if ( mpactIsInView(jQuery( element ) ) ) {
            jQuery( element ).removeClass('mpact-animated-pause');
            jQuery( element ).addClass('mpact-animated-play');
        } else {
            jQuery( element ).removeClass('mpact-animated-play');
            jQuery( element ).addClass('mpact-animated-pause');
        }
    });
}

jQuery(window).scroll(function(){
    mpactCheckAnim();
});

SAMPLE DIV

<div class="mpact-sidebar-cta cta-container mpact-animated mpact-animated-pause mpact-shake" style="border-style: dashed; border-width: 3px; border-color: #000; background-color: hsl(130, 97%, 48%);">    
    <div class="mpact-sidebar-cta container-top" style="">                  
        <div class="mpact-sidebar-cta cta-heading-container" style="padding: 20px 20px 5px;">              
            <h2 class="mpact-sidebar-cta heading" style="color: #333;">Heading</h2>        
        </div>    
    </div>    
    <div class="mpact-sidebar-cta container-bottom" style="color: #333;">        
        <div  class="mpact-sidebar-cta cta-content-padding-container" style="padding: 10px 20px;">            
            <div  class="mpact-sidebar-cta cta-content-container" style="">                Enter the text content for the !M CTA.             
            </div><br />            
            <div  class="mpact-sidebar-cta cta-button-container" style="">                
                <a class="x-btn x-btn-global alignright" style="" href="http://www.some-domain.com">Click Here!</a>            
            </div>            
            <div  class="mpact-sidebar-cta cta-call-container" style="">                
                <a class="x-btn x-btn-global alignright" style="" href="tel:+1234567890">Call Us!</a>            
            </div>        
        </div>    
    </div>
</div>

非动画CSS

.mpact-sidebar-cta.cta-container { width: 100%; display: inline-block; }
. mpact-sidebar-cta.heading { font-size: 20px; line-height: 24px; text-transform:uppercase ; font-weight: 900; -webkit-margin-before: 0em; -webkit-margin-after: 0em; }
. mpact-sidebar-cta.container-top { display: inline-block; width: 100%; }
. mpact-sidebar-cta.container-bottom { display: inline-block; width: 100%; }
. mpact-sidebar-cta.cta-content-padding-container { display: inline-block; width: 100%; }
. mpact-sidebar-cta.cta-content-container { display: inline; }
. mpact-sidebar-cta.cta-button-container { display: inline; }
. mpact-sidebar-cta.cta-call-container { display: none; }

@media (max-width: 1280px) {
/* 13" notebook */

}

@media (max-width: 1024px) {
/* 12" netbook, 10" netbook */

}


@media (max-width: 800px) {
/* Kindle Fire HD 8.9,  */

}

@media (min-width: 768px) {
/* Apple iPads and Up  */
    .cta-button-container { display: inline; }
    .cta-call-container   { display: none; }
}

@media (max-width: 768px) {
/* Apple iPad 1/2/3/mini,  */

}

@media (max-width: 640px) {
/* 480p television */
    .cta-button-container { display: none; }
    .cta-call-container   { display: inline; }
}

@media (max-width: 603px) {
/* Google Nexus 7 */

}

@media (max-width: 600px) {
/* Kindle Fire, Samsung Galaxy Tab */

}

@media (max-width: 533px) {
/* Kindle Fire HD 7 */
    .cta-button-container { display: inline; }
    .cta-call-container   { display: none; }
}

@media (max-width: 360px) {
/* Samsung Galaxy S3/4,  */
    .cta-button-container { display: none; }
    .cta-call-container   { display: inline; }
}

@media (max-width: 320px) {
/* Apple iPhone 3/4/5, Samsung Galaxy SII, ASUS Galaxy 7, LG Optimus S, Blackberry 8300  */

}

Answer 1

似乎问题是预设的迭代次数。如果你搜索，有一些技巧围绕着SO。 对于您的特定情况，我建议将迭代计数设置为无限，并通过切换类来暂停动画。你可以在暂停课上transform: none，以防动画在某个奇怪的时间停止：

＆＃13;

＆＃13;

function mpactIsInView(elem) {
  var $elem = jQuery(elem);

  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = jQuery(scrollElem).scrollTop();
  var viewportBottom = viewportTop + jQuery(window).height();

  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function mpactCheckAnim() {
  jQuery(".mpact-sidebar-cta.cta-container").each(function(index, element) {
    if (mpactIsInView(jQuery(element))) {
      jQuery(element).removeClass('mpact-animated-pause');
      jQuery(element).addClass('mpact-animated-play');
      var timeout = setTimeout(function() {
        jQuery(element).removeClass('mpact-animated-play');
        jQuery(element).addClass('mpact-animated-pause');
      }, 2000);
    } else {
      jQuery(element).removeClass('mpact-animated-play');
      jQuery(element).addClass('mpact-animated-pause');
    }
  });
}

jQuery(function() {
  jQuery(window).scroll(function() {
    mpactCheckAnim();
  });
});

＆＃13;

.container {
  height: 400px;
  overflow: auto;
  padding: 1000px 0;
  box-sizing: content-box;
}
.mpact-animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.mpact-animated-play {
  animation-play-state: running !important;
}
.mpact-animated-pause {
  animation-play-state: paused !important;
  transform: none;
}
.mpact-shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.mpact-heartbeat {
  -webkit-animation-name: heartbeat;
  animation-name: heartbeat;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.mpact-bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
  <div class="mpact-sidebar-cta cta-container mpact-animated mpact-animated-pause mpact-shake" style="border-style: dashed; border-width: 3px; border-color: #000; background-color: hsl(130, 97%, 48%);">
    <div class="mpact-sidebar-cta container-top" style="">
      <div class="mpact-sidebar-cta cta-heading-container" style="padding: 20px 20px 5px;">
        <h2 class="mpact-sidebar-cta heading" style="color: #333;">Heading</h2>
      </div>
    </div>
    <div class="mpact-sidebar-cta container-bottom" style="color: #333;">
      <div class="mpact-sidebar-cta cta-content-padding-container" style="padding: 10px 20px;">
        <div class="mpact-sidebar-cta cta-content-container" style="">Enter the text content for the !M CTA.
        </div>
        <br />
        <div class="mpact-sidebar-cta cta-button-container" style="">
          <a class="x-btn x-btn-global alignright" style="" href="http://www.some-domain.com">Click Here!</a>
        </div>
        <div class="mpact-sidebar-cta cta-call-container" style="">
          <a class="x-btn x-btn-global alignright" style="" href="tel:+1234567890">Call Us!</a>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;