transform

transform 不会影响元素在页面的位置，它实际上是重叠在元素的上方下方或者旁边。
换句话说，web浏览器会保留元素没有变化时网页上的所有其他部件

http://westciv.com/tools/transforms/index.html
https://www.smashingmagazine.com/2012/01/adventures-in-the-third-dimension-css-3-d-transforms/
https://webkit.org/blog-files/3d-transforms/morphing-cubes.html
https://developer.apple.com/safaridemos/showcase/gallery
https://2011.beercamp.com/
http://www.satine.org/research/webkit/snowleopard/snowstack.html

transition

• 两个样式
• 使用transition属性
• 触发器 (:hover, :active,:focus) or javascript

cubic-bezier

transition-timing-function: cubic-bezier(.20, .96,.74,.07);

http://matthewlein.com/ceaser
www.the-art-of-web.com/css/timing-function

animation

@keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}

.fade {
animation-name: fadeOut;
animation-duration:2s;
animation-iteration-count: 2;
animation-direction: alternate;
}

动画结束时保留为动画结束时的样子：

animation-fill-mode: forwards;

暂停动画

animation-play-state: paused;