<!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. pick定理：面积=内部整数点数+边上整数点数/2-1

    //pick定理:面积=内部整数点数+边上整数点数/2-1 // POJ 2954 #include <iostream> #include <cstdio> #include ...

  2. vim 7.4 编译安装

    (1): 在安装新版本的Vim之前,你需要卸载原来安装的老版本Vim,依次在终端下执行下列命令: sudo apt-get remove vim sudo apt-get remove vim-run ...

  3. ado无法访问数据库问题

    现象:以ADO方式访问数据库的C++程序,在一台计算机上能访问成功,在另一台计算机上却访问不成功,报告不能连接错误,并且这两台计算机都装有ado. 原因:ado版本不对 解决方案:下载KB983246 ...

  4. centos php php-fpm install

    好记性不如烂笔头,把自己安装的步骤记录下来 1.下载php-5.2.8以及php-5.2.8-fpm-0.5.10.diff.gz,放到/usr/local/src目录 2.解压php-5.2.8到/ ...

  5. mysql基础知识（5）－－视图

    视图 单词:view 什么是视图: 视图可以看作是一个“临时存储的数据所构成的表”(非真实表),其实本质上只是一个select语句.只是将该select语句(通常比较复杂)进行一个“包装”,并设定了一 ...

  6. HDU 5857 Median （推导）

    Median 题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5857 Description There is a sorted sequ ...

  7. 详解keil采用C语言模块化编程时全局变量、结构体的定义、声明以及头文件包含的处理方法

    一.关于全局变量的定义.声明.引用: (只要是在.h文件中定义的变量,然后在main.c中包含该.h文件,那么定义的变量就可以在main函数中作为全局变量使用) 方法1: 在某个c文件里定义全局变量后 ...

  8. OracleCommand.CommandText 无效

    OracleCommand insertADataCmd = conn.CreateCommand(); insertBDataCmd.CommandText = SQL OracleParamete ...

  9. easyui问题小记

    在easyui1.4.3版本中,(其他版本不知道是不是也是这样的),绑定在datagridview上面的数据最好不要是带有特殊符号的字段,不然会导致部分的属性不好用,比如这样的字段  START_DA ...

  10. HDU 1712 ACboy needs your help (分组背包模版题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 有n门课,和m天时间.每门课上不同的天数有不同的价值,但是上过这门课后不能再上了,求m天里的最大 ...