I belong to : Collection
突然看到有H5页面外快做，看到微信朋友圈发的那些H5页面里面都用的了TweenMax，所以来研究一下，结果吓一跳，太太太强大了！！！！
background-size: width height
background-clip:content-box/padding-box/border-box
background-origin:content-box/padding-box/border-box
background-image:url(bg_flower.gif),url(bg_flower_2.gif);多个背景
text-shadow:水平阴影 垂直阴影 模糊距离 阴影的颜色
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影的尺寸 阴影的颜色
clip: rect (top, right, bottom, left)
<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起；
<left>和<right>指定的偏移量是从元素盒子左边边缘算起。
word-wrap:break-word
@font-face
转换
transform:translate()/rotate()/scale()/skew()/matrix()/rotateX()/rotateY()
动画
transition:transition-property transition-duration transition-timing-function transition-delay
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
animation: myfirst 5s;
多列，这个只能平均分
column-count
column-gap
column-rule
resize:both 可以鼠标拖拽
box-sizing:border-box;
outline:2px solid red;
outline-offset:15px;
了解资料
3D Transforms & More CSS3 Goodies Arrive in GSAP JS
基础实例
Timeline Tip: Understanding the Position Parameter
Basic play / pause toggle button
create a playful Jump Loader animation
进阶 Writing Smarter Animation Code
https://greensock.com/examples-showcases
https://tympanus.net/codrops/ 隆重介绍这个网站，上面有好多好多好看的动画
GreenSock Animation Platform(GSAP) 是一套脚本动画工具。它包括：
{% blockquote %}
TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.)TweenMax: TweenLite's beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, etc. It includes many common plugins too like CSSPlugin so that you don't need to load as many files. The focus is on being full-featured rather than lightweight.TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.TimelineMax: extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), and many more. Again, just like TweenMax does for TweenLite, TimelineMax aims to be the ultimate full-featured tool rather than lightweight.{% endblockquote %}
TweenLite 可以解决基础动画Lightweight TweenLite: Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, and Strong
EasePack : Elastic, SlowMo, Bounce, SteppedEase, Sine, Circ, and Expohttps://greensock.com/ease-visualizer
rotation,
scaleX,
scaleY,
scale,
skewX,
skewY,
x, (相当于css的translateX)
y, (相当于css的translateY)
xPercent,
yPercentxPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spotrotationX,
rotationY,
rotationZ (identical to regular "rotation"),
z,(相当于css的translateZ)
perspective,
transformPerspectiveTo get your elements to have a true 3D visual perspective applied, you must either set the "perspective" property of the parent element or set the special "transformPerspective" of the element itself (common values range from around 200 to 1000, the lower the number the stronger the perspective distortion)
{% blockquote %}
perspective distortion透视变形指的是一个物体及其周围区域与标准镜头中看到的相比完全不同，由于远近特征的相对比例变化，发生了弯曲或变形。
{% endblockquote %}
transformOrigin
directionalRotation
autoAlpha
className
autoRound By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween if you'd rather disable that behavior, pass autoRound:false You can still use the RoundPropsPlugin to manually define properties that you want rounded.
immediateRender :默认值true,在 from(), fromTo(), staggerFrom() and staggerFromTo() 方法中用
force3D :默认false
tween.pause();
tl.pause() // pauses the animation
tl.paused() // gets paused state, returns true or false
tl.paused(true) // sets paused state to true
tl.paused(!tl.paused()) // sets paused state to inverse of current paused state.tween.resume(); tween.reverse(); tween.seek(0.5); tween.timeScale(0.5); tween.timeScale(2); tween.kill();
TweenLite.killTweensOf(myElement);
TimelineLite 让动画有序和组织//create a TimelineLite instance
var tl = new TimelineLite();
//append a to() tween
tl.to(element, 1, {width:"50%"});
//add another sequenced tween (by default, tweens are added to the end of the timeline which makes sequencing simple)
tl.to(element, 1, {height:"300px", ease:Elastic.easeOut});
//offset the next tween by 0.75 seconds so there's a gap between the end of the previous tween and this new one
tl.to(element, 1, {opacity:0.5}, "+=0.75");
//overlap the next tween with the previous one by 0.5 seconds (notice the negative offset at the end)
tl.to(element, 1, {backgroundColor:"#FF0000"}, "-=0.5");
//animate 3 elements (e1, e2, and e3) to a rotation of 60 degrees, and stagger their start times by 0.2 seconds
tl.staggerTo([e1, e2, e3], 1, {rotation:60}, 0.2);
//then call myFunction()
tl.call(myFunction);
//now we can control the entire sequence with the standard methods like these:
tl.pause();
tl.resume();
tl.restart();
tl.reverse();
tl.play();
//jump to exactly 2.5 seconds into the animation
tl.seek(2.5);
//slow down playback to 10% of the normal speed
tl.timeScale(0.1);
//add a label named "myLabel" at exactly 3 seconds:
tl.add("myLabel", 3);
//add a tween that starts at "myLabel"
tl.add( TweenLite.to(element, 1, {scale:0.5}), "myLabel");
//jump to "myLabel" and play from there:
tl.play("myLabel");
TimelineMax和TweenMax 多一些功能repeat,
yoyo:Boolean
repeatDelay and more.TimelineMax 还有方法
tweenTo(),
currentLabel(),
getLabelBefore()
getLabelAfter() and more.all,none,auto
TweenLite.defaultOverwrite = "all";
stagger可以让多个元素执行同一个动画