<!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. 认识Agile，Scrum和DevOps

    If everything's under control you are going too slow. 当今的开发,要求faster and faster.所以我们要Agile,become Ag ...

  2. Linux-sed用法

    本文为转载,原地址:http://www.cnblogs.com/dong008259/archive/2011/12/07/2279897.html sed是一个很好的文件处理工具,本身是一个管道命 ...

  3. c++ List、Vector、Stack、Queue使用

    一.List使用 引入头文件#include <list> List基本函数Lists将元素按顺序储存在链表中. 与 向量(vectors)相比, 它允许快速的插入和删除,但是随机访问却比 ...

  4. Linux入门视频

    为了方便新手学习Linux,本人专门录制了以下Linux初级视频方便学习,本系列多媒体教程已完成的博文: 轻松学习Linux之入门篇 http://chenguang.blog.51cto.com/3 ...

  5. koa 笔记 运行错误

    按照 演示的代码 直接运行会出错,大家需要调整方式. http://koajs.cn/ 要安装以下 $ npm install -g n$ n 0.11.12$ node --harmony my-k ...

  6. return View()

  7. Spark的优点

    Spark的一站式解决方案,非常之具有吸引力,毕竟啊,任何公司都想用统一的平台去处理遇到的问题,减少开发和维护的人力成本和部署平台的物力成本. 当然,Spark并没有以牺牲性能为代价.相反,在性能方面 ...

  8. 关于文章“cocos2dx移植android平台-我的血泪史”需要注意事项

    关于文章"cocos2dx移植android平台-我的血泪史"需要注意事项 在上次转载的这篇文章中,按照配置一步一步的下去.发现工程中在Android.mk中有一处错误.直接bui ...

  9. pd虚拟机死机怎么解决

    最近在mac上使用pd虚拟机装win使用,今天发现pd中的win7虚拟机死机了,无论怎么点都没用,通过点击操作-关闭也不行,重启电脑也不行,后来找到一种办法可以重启虚拟机. 1.先通过菜单中止虚拟机, ...

  10. $watch How the $apply Runs a $digest

    作者:junyuecao | 发表于 8-8 13:39 | 最后更新时间:8-9 02:34 原文地址:http://angular-tips.com/blog/2013/08/watch-how- ...