Question

如何制作，动画从移动到特定锚点的那一刻开始？

例如我在页面上有三个锚点（主页，服务和联系人）。我正在使用＆＃34;打字＆＃34;动画。

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

在页面中，我包含了一个jquery。

现在我不知道如何制作，动画将从转移到特定锚点的那一刻开始......

Answer 1

如果我理解正确，你想在一个元素在视口中时启动一个CSS动画，对吗？

您需要使用javascript检测元素是否在视口内，然后添加一个播放动画的类。网上有很多关于此的教程，但这里有3个盒子，当你滚动并看到它们时会动画( found here )

＆＃13;

// Plugin @RokoCB :: Return the visible amount of px
// of any element currently in viewport.
// stackoverflow.com/questions/24768795/
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el){
       function visPx(){
         var H = $(this).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
       } visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));



$(".box").inViewport(function(px){
    if(px) $(this).addClass("triggeredCSS3") ;
});

＆＃13;

.box{
    width:300px;
    height:300px;
    margin:500px 50px;
    background:red;
    transition: 1.5s;
}

.rotate.triggeredCSS3    {transform : rotate(360deg); }
.scale.triggeredCSS3     {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>

＆＃13;

动画开始于特定的时刻

1 个答案: