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;
