使用 GSAP 的 CSS 动画

Question

如何用 GSAP 实现这个动画。这是css代码

.element {
    -webkit-animation-name: fall, opacity;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes fall {
  0% {
    -webkit-transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(21px);
  }
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

这是我试过的，但动画不是很好：

var tlm=new TimelineMax({repeat:-1, delay:delay, repeatDelay:0, yoyo: false, ease: Sine.easeIn });
tlm.from(elem, 1, {y:0, opacity:0 })
  .to(elem, 1, {y:10, opacity:1 })
  .to(elem, 1, {y:20, opacity:0 });

它以步骤为动画。这是fiddle

---

这是 greensocks 在其论坛上提供的solution：

function drizzleFall(elem, delay){
  var tl = new TimelineMax({repeat:-1, delay:delay});
  tl.fromTo(elem, 1, {y:0}, {y:21, ease:Power1.easeIn})
    .fromTo(elem, 0.5, {opacity:0}, {opacity:1, repeat:1, yoyo:true, ease:Linear.easeNone}, 0);
}

Answer 1

应该更容易实现，here is your resulting fiddle。

JS：

var cloudDrizzle = document.querySelectorAll('#cloudDrizzle2 .climacon_component-stroke_drizzle');
var duration = 1;
var firstTimeline = createTimeline(cloudDrizzle[0], duration, 0);
var secondTimeline = createTimeline(cloudDrizzle[1], duration, duration * 0.6);
var secondTimeline = createTimeline(cloudDrizzle[2], duration, duration * 1.2);

function createTimeline(target, duration, delay) {
  var timeline = new TimelineMax({ repeat: -1, delay: delay });

  timeline.fromTo(target, duration, {
    opacity: 0
  }, {
    bezier: { values: [{ opacity: 1 }, { opacity: 0 }]},
    ease: Power1.easeIn
  }, 0);

  timeline.to(target, duration, {
    y: 21,
    ease: Power1.easeIn
  }, 0);

  return timeline;
}

希望这会有所帮助。