[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 ...
随机推荐
- 关于面试mysql优化的几点纪要
1.减少查询次数 ,如何减少 ? 2. 表结构优化,如何优化 ? 3. 列选取原则 ? 4.建索引原则 ? 5.mysql语句优化 ? 6.增加mysql处理性能 ? 通过这几点, 再来说 ...
- WS之cxf的权限拦截器应用
一.服务器端: 1.权限判断: package cn.tdtk.ws.interceptor; import java.util.List; import org.apache.cxf.binding ...
- IDEA使用docker进行调试
背景 手头有个任务,需要用java通过jni调用一个开源算法库gmssl的功能,但是gmssl只提供了源码,需要编译后才能使用.按照通常的做法,我们会部署好centos的虚拟机和开发环境,安装好gms ...
- gem 相关命令
gem #查看gem源 gem sources # 删除默认的gem源 gem sources --remove http://rubygems.org/ # 增加taobao作为gem源 gem s ...
- java 的开源wiki维基系统
几乎所有 维基 系统的对比网址: http://www.wikimatrix.org/ XWiki, 第二代wiki. 它里面使用的 velocity 模板语言对j2ee开发相当有参考价值, ...
- HDU 1847 Good Luck in CET-4 Everybody!（找规律，或者简单SG函数）
Good Luck in CET-4 Everybody! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- oracle根据正则表达式查找对应的字段
语法如下: SELECT * FROM 表名WHERE regexp_like(表字段,'正则') 例如: 查找某字段小数点后有两个小数以上的信息 SELECT * FROM A TWHERE reg ...
- ASP.NET的分页方法（三）
第三讲是应用于MVC上面的分页,很多时候MVC要和EF表达式一起使用,但是我这个使用的最原始的ADO.NET,一样实现了这个效果.要实现这个效果首先要得到MvcPager.dll,引用之后,前台操作如 ...
- URAL 2068 Game of Nuts (博弈)
题意:给定 n 堆石子,每次一个人把它们分成三堆都是奇数的,谁先不能分,谁输. 析:因为每堆都是奇数,那么最后肯定都是要分成1的,那么就把不是1的全加和,然后判断奇偶就OK了. 代码如下: #prag ...
- CCPC总结
[印象·南阳] 10月15日出发,威海—烟台—郑州—南阳,一路上欢声笑语,从谁是卧底到各类纸牌游戏,也是欢乐.在从郑州到南阳的车上,对面的好像是河南当地的学长,感叹道工作不易的样子,说还是学生时代最为 ...