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

TweenMax.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()的更多相关文章

  1. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  2. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  3. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  4. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  5. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  6. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  7. 第四十一课：CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

  8. CSS3 animation 与JQ animate()的区别

    CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...

  9. CSS3(animation, trasfrom)总结

    CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...

随机推荐

  1. F#相关图书推荐

    C#与F#编程实践 作      者 [捷] Tomas Petricek,[英] Jon Skeet 著:贾洪峰 译 出 版 社 清华大学出版社 出版时间 2011-10-01 版      次 1 ...

  2. （转载）OC学习篇之---类的延展

    前一篇文章我们介绍了类的类目概念和使用,那么这篇文章我们继续来介绍一下OC中的一个特性:延展. 其实说白了,延展就是弥补C语言中的前向申明,我们知道,在C语言中,如果你想调用一个函数的话,那么在此之前 ...

  3. 使用jqueryui

    $(function () { $('#search_button').button(); /* 同时打开两个对话框 $('#reg').dialog(); $('#login').dialog(); ...

  4. pybombs 安装

    参考:https://github.com/gnuradio/pybombs 先装:pip 然后: pip install PyBOMBS 更新源: pybombs recipes add gr-re ...

  5. 修改docker的默认存储位置

    service docker stop mv /var/lib/docker /mnt/docker ln -s /mnt/docker /var/lib/docker ls /var/lib/doc ...

  6. c++10 Seattle Clang error

    升级到C++Builder RAD 10 Settle 一些错误解决方法,使用LLVM  CLang编译器,BCC32C http://docwiki.embarcadero.com/RADStudi ...

  7. Android NDK调试C++源码(转)

    [原创文章,转载请保留或注明出处,http://download.csdn.net/download/bigmaxim/5474055] 1. 相关软件 adt-bundle-windows-x86. ...

  8. index structure

    1. wordlist 0) 0, 1byte 1) token-id(delta), 8byte 2) doclist-offset(delta), 8byte 3) doc_count, 4byt ...

  9. 配置cisco路由器特定时间重启

    方法一: Router1#reload in 20 Reload scheduled for 11:33:53 EST Sat Feb 1 2003 (in 20 minutes) Proceed w ...

  10. 用python实现远程复制 （scp + expect ）

    scp 功能很强大,但需要人工输入 password, 当然可以通过把 公钥保存在远程主机的 ~/.ssh 目录中,而后就不用输入password,但这需要配置. 用 sshpass 可能在命令输入 ...