首页 > 代码库 > [CSS3 Animation] TweenMax.staggerTo()
[CSS3 Animation] TweenMax.staggerTo()
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Hello Greensock!</title> <link href=‘http://fonts.googleapis.com/css?family=Asap:400,700‘ rel=‘stylesheet‘ type=‘text/css‘> <link href=‘http://fonts.googleapis.com/css?family=Signika‘ rel=‘stylesheet‘ type=‘text/css‘> <link href=‘main.css‘ rel=‘stylesheet‘ type=‘text/css‘></head><body><h2>TweenMax.staggerTo()</h2><div id="demo"> <p>The start times of each animation are staggered by 0.5 seconds</p> <div class="box green"></div> <div class="box grey"></div> <div class="box orange"></div> <div class="box green"></div> <div class="box grey"></div> <div class="box orange"></div> <div class="box green"></div> <div class="box grey"></div> <div class="box orange"></div></div></body><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script><script src="app.js"></script></html>
CSS:
html, body { height: 100%;}body { background-color:#1d1d1d; font-family: "Asap", sans-serif; color:#989898; margin:0 10px; font-size:16px;}h1, h2, h3 { font-family: "Signika Negative", sans-serif; margin: 10px 0 10px 0; color:#f3f2ef;}h1 { font-size:36px;}h2 { font-size:30px;}h3 { font-size:24px;}p{ line-height:22px; margin-bottom:16px; width:650px;}#demo { height:100%; position:relative;}.box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block}.green{ background-color:#6fb936;}.orange { background-color:#f38630;}.grey { background-color:#989898;}
Javascript:
TweenMax.staggerTo(".green", 1.5, {rotation:360, y:100, x: 50}, 0.5); //class="green" box ratate 360 degree to Y = 100, X = 50, every 0.5s, one green box start to moveTweenMax.staggerTo(".grey", 2, {rotation:720, y:150, x: 50}, 0.5);
The difference bewteen staggerTo() with to() method is that, staggerTo trigger element one by one, but to() trigger all elements at once.
[CSS3 Animation] TweenMax.staggerTo()
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。