[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 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()的更多相关文章
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3 Animation Cheat Sheet：实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 第四十一课：CSS3 animation详解
animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...
- CSS3 animation 与JQ animate()的区别
CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...
- CSS3(animation, trasfrom)总结
CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...
随机推荐
- Name-based virtual servers 给予名称的虚拟服务
nginx first decides which server should process the request. Let’s start with a simple configuration ...
- 该不该将变量设为 null ？
该不该将变量设为 null ? 对于引用类型的变量,在什么时候需要将其显式设为 null ,在什么时候不需要呢? 局部变量 对于局部变量,在方法结束的时候,变量就会失效,变量指向的对象引用也会减少一个 ...
- 程序语言的奥妙：算法解读 ——读书笔记
算法(Algorithm) 是利用计算机解决问题的处理步骤. 算法是古老的智慧.如<孙子兵法>,是打胜仗的算法. 算法是古老智慧的结晶,是程序的范本. 学习算法才能编写出高质量的程序. 懂 ...
- gem openssl 出错
Unable to require openssl, install OpenSSL and rebuild ruby (preferred) or use non-HTTPS sources 1. ...
- HDU-2888 Check Corners 二维RMQ
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2888 模板题.解题思路如下(转载别人写的): dp[row][col][i][j] 表示[row,ro ...
- 编辑器CocoStudio和CocosBuilder的对比
来源:http://4137613.blog.51cto.com/4127613/1352805 CocosBuilder CocoStudio 控件种类 支持大部分cocos2d-x自带的常用控 ...
- 使用Java程序调用MatLab
Java代码实现的计算难免会显得不够高效.而利用MATLAB写好相应的计算函数,然后打包成jar包供Java调用,在某些情况下会更加方便.或者有些时候会涉及到使用Java调用MatLab展现一些二维三 ...
- HDU 5857 Median （推导）
Median 题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5857 Description There is a sorted sequ ...
- Spring JTA应用JOTM & Atomikos II JOTM
上节建立了一个简单的Java Application以及所需要的数据库和数据表,本节将介绍JOTM在Spring中的配置. JOTM(Java Open Transaction Manager)是Ob ...
- react native listview 一个有用的属性，用作两列布局
contentContainerStyle:设置listview包裹内容的属性 <ListView contentContainerStyle={{flexDirection:'row',fle ...