问题：

重置CSS3动画

徐高懿

2023-03-14

我正在动画一个或多个div滚动到视图中。我是通过将动画css拆分成几个类（见下文）来做到这一点的。

动画div最初将具有类'.mpact-animated'和'.mpact-animated-pause'。div还将具有以下类之一'.mpact-shake'、'.mpact-heartbeat'或'.mpact-bounce'。这些动画类是由用户选择的，所以我不知道哪一个是要实现的。

当页面滚动时，通过Javascript检查div（见下面），看看它们是否已滚动到视图中。如果它们有“.Mpact-Animated-Pause”类，则删除“.Mpact-Animated-Play”类，并添加“.Mpact-Animated-Play”类。当div滚动出视图时，'.mpact-animated-play'类被移除，而'.mpact-animated-pause'类被添加。

在DIVs第一次滚动到视图中时，这可以按计划工作，但在DIVs随后滚动到视图中时则不可以。

我如何重置动画，使它将重新运行后的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); } }

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();
});

示例分区

<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  */

}

共有1个答案

景建业

2023-03-14

问题似乎是预置的迭代计数。有一些诡计周围所以如果你搜索。对于您的特殊情况，我建议将迭代计数设置为infinite，并通过切换类来暂停动画。您可以在pause类上transform:none，以防动画在某个奇怪的时间停止：

null

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();
  });
});

.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);
  }
}

<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>

类似资料：

CSS3 动画

#animated_div{ width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1;
CSS3链动画

问题内容：我需要在某些文本上执行一系列动画处理，并且我打算使用CSS3。我的计划是使一些文本缓慢地在屏幕上向下移动，并到达屏幕的特定部分后，某些单词将被突出显示，最终文本将继续在屏幕上向下移动并消失，为进一步的文本留出空间。我的问题是，“链接”这些动画的最佳方法是什么。我是否应该有一个用于向下移动屏幕的动画，一个用于突出显示文本的单独动画以及一个用于向下移动屏幕其余部分的动画？然后，是否应该将
CSS3 - 动画 Animation

动画是进行形状变化和用元素创建动作的过程。 @keyframes 关键帧将控制CSS3中的中间动画步骤。带左动画的关键帧示例 - @keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px;
CSS3 FLEXBOX左右浮动项[重复]

在上面的例子中，我希望项目1在左侧，项目2和3在右侧的页面使用CSS3 FlexBox。提前致谢
CSS3旋转动画

问题内容：无法使此动画图像正常工作，它应该进行360度旋转。我猜下面的CSS有点问题，因为它保持静止。问题答案：这是正确的动画CSS：有关代码的一些注意事项：您已将关键帧嵌套在规则中，这是不正确的不适用于绝对定位的元素看看caniuse：IE10不需要前缀
CSS3自旋动画

问题内容：我已经回顾了很多演示，并且不知道为什么我无法使CSS3自旋起作用。我正在使用最新的稳定版Chrome。问题答案：要使用CSS3动画，您还必须定义实际的动画关键帧（您将其命名为）配置了动画的时间后，您需要定义动画的外观。这是通过使用规则建立两个或更多关键帧来完成的。每个关键帧描述动画元素在动画序列中给定时间应如何呈现。

重置CSS3动画

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档