<!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. 【quick-cocos2d-x】Lua 面向对象（OOP）编程与元表元方法

    版权声明:本文为博主原创文章,转载请注明出处. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 早期的计算机编程是基于面向过程的方法,通过设计一个算法就可以解决当时 ...

  2. 写在阿里去IOE一周年

    [文/ 任英杰] 去年5月17日,阿里巴巴支付宝最后一台IBM小型机在下线,标志着阿里完成去IOE.随后一场去IOE运动不断发酵,甚至传闻IBM中国去年损失了20%的合同额. 去了IOE,奔向何方?阿 ...

  3. 了解一下jsp

    本着和大家共同学习jsp的原则,今天谈一谈jsp. 首先,JSP(全称JavaServer Pages)是由Sun Microsystems公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户 ...

  4. 使用ncc分析代码

    1 ncc是一个编译器, 用于输出程序的一些调用信息等, 可以查看函数调用关系, 支持函数指针, 查看数据结构和代码. 可以用来分析和理解代码. “" ... with ncc, in le ...

  5. HTML5新增属性

    [sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...

  6. C++学习之路--类的构建以及数据转换存储

    注意理解下面的代码,数据的处理与转换. 头文件: #ifndef STACK_H #define STACK_H class Stack { struct Link { void* data; Lin ...

  7. windows创建虚拟界面

    定义 VDesktopName: PAnsiChar; //虚拟桌面名 VDesktop: HDESK; //虚拟桌面   创建 VDesktopName := 'MYDESK'; VDesktop ...

  8. Office2016 转换零售版为VOL版

    @echo off :ADMIN openfiles >nul >nul ||( echo Set UAC = CreateObject^("Shell.Application& ...

  9. C# html互转mht

    using System;using System.Runtime.InteropServices;using System.Text;using System.IO;namespace HTMLCo ...

  10. 从数列1，2，3.......n 中 随意取几个数,使其和等于 m

    //从数列1,2,3.......n 中 随意取几个数,使其和等于 m           public static void Print(int n, int m, List<int> ...