前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
- translate：平移；是transform的一个属性；
- transform：变形；是一个静态属性，可以改变元素的形状或位置，做出 2d 或 3d 效果；
- transition：过渡，转变；使 css 属性值在一段时间内平滑的变化，需要有触发条件（如 hover 等），是 animation 的简化版；
- animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；
transition
过渡，右有四个子属性：
- transition-property：过渡属性，默认为 all；
- transition-duration：过渡效果花费的时间，默认值是0，以秒或毫秒计，不能为负值；
- transition-timing-function：定义过渡效果的速度，默认值 ease(开始和结束慢，中间快)，可以设置 linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；
- transition-delay：定义过渡延时时间；默认值为0（直接开始），以秒或毫秒计，可为负值；
- transition的四个子属性可以缩写，用空格隔开；其中 duration（过渡时间）和 delay（延时时间）两个值都是时间，当两个值都存在时，第一个是 duration（过渡时间），第二个是 delay（延时时间）；如果只存在1个时间，那就是 duration（过渡时间），delay（延时时间）默认为0；
- transition可以同时设置多个属性的过渡效果，用逗号隔开；
- transition需要有触发条件，animation 则不需要；
建议看 大神的这篇博文，讲的比较详细，里面还有关于 API 的东西；
想整个 hover 效果的，弄了好久，又是 iframe（在 jsrun.cn 网站上做出效果，然后分享，自动生成 iframe 链接），又是 js 的，都没弄出来，好像是没有 js 权限，懒得整了。
<style type="text/css"> * { padding: 0; margin: 0; } .wrapper { margin: 100px; height: 300px; border: 10px solid #f0f; background: #0ff; position: relative; cursor: pointer; } .test { width: 100px; height: 100px; background: #f60; position: absolute; left: 30px; top: 30px; transition: width 1s ease-in-out 2s, height 2s ease-in, background 3s linear, left .5s ease-out, top 1.5s ease-in; } .wrapper:hover .test { width: 150px; height: 50px; background: #ff0; left: 200px; top: 150px; } </style> <div class="wrapper"> <div class="test"></div> </div>
animation
动画，一种样式到另一种样式的动画效果，可以改变任意多的次数任意多的样式，用百分比来规定发生的时间，或关键词"from"和"to"，等同于"0%"和"100%"；
- 先用 @keyframes 定义动画的名称，然后根据时间轴来写不同的动画效果；
- 在需要做动画效果的元素身上设置 animation 属性，并绑定动画名称，然后设置动画持续时间、时间函数、延时、播放次数、播放方向、播放状态、填充模式等；
@keyframes:
- @keyframes，声明动画名称；时间轴的百分比顺序可以随便排列，最后浏览器都是从0%到100%按顺序解析，0%不可以省略百分号；
- 设置小于0%或者大于100%的百分比是无效的；
- 如果0%或100%没有写动画效果的属性，那么将应用元素默认的属性值；
- 如果多个 @keyframes 的名称相同，那么只有最后一个有效，如果最后一个 @keyframes 没有写任何属性，那么动画效果就是没有的（不管前面相同名称的 @keyframes）
animation-duration
动画执行完成所需时间，默认为0（没有动画效果），不能为负值，否则将没有动画效果；
animation-timing-function
类似与transition的时间函数，默认值ease(开始和结束慢，中间快)，可以设置linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；
animation-delay
定义延时多长时间后开始播放动画；可以设置负值（从提前多少秒的位置开始播放动画）；
animation-interation-count
循环次数，默认值是1，可以设置整数或小数，不能是0以及负值，也可以设置关键词"infinite"（无限次数）；
animation-direction
默认值 normal（正向），可设置 reverse（反向）、alternate（在奇数次正向，偶数次反向；也就是说动画顺序是0%---100%---0%---100%---...）、alternate-reverse（在奇数次反向，偶数次正向，也就是说动画顺序是100%---0%---100%---0%---...）；
safari 浏览器不支持 alternate 和 alternate-revers 属性；
animation-fill-mode
定义动画开始帧和结束帧的动作；默认值是 none（动画结束后，回归到初始状态，不是0%，是元素本身属性）；
可设置 forwards（元素停留在动画结束的状态，这个值并不一定是100%的位置，因为可能是反向播放，也可能播放次数是小数）；
可设置 backwards（元素停留在动画开始的状态，这个值不一定是0%的位置，因为延迟开始的时间可能是负值）；
可设置 both，意思是同时具有 forwards 和 backwards 的效果；
animation-play-state
设置动画运行（running）或者暂停（paused）;
建议看 大神的这篇博文，讲的比较详细，里面还有关于API的东西；
六面体旋转：
<style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } .wrapper { width: 600px; height: 600px; margin: 0 auto; } .demo-container { position: relative; width: 600px; height: 600px; perspective: 1800px; /*定义视距*/ } @keyframes bigMove { 0% { transform: rotateX(-25deg)rotateY(-45deg); } 20% { transform: rotateX(-25deg)rotateY(135deg); } 100% { transform: rotateX(-25deg)rotateY(135deg); } } @keyframes smallMove { 0% { transform: rotateX(-25deg)rotateY(-45deg); } 20% { transform: rotateX(-25deg)rotateY(-405deg); } 100% { transform: rotateX(-25deg)rotateY(-405deg); } } .box { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; transform: rotateX(-25deg)rotateY(-45deg); transform-style: preserve-3d; animation: bigMove 5s infinite ease-in-out 2s; } .box li { width: 300px; height: 300px; box-shadow: 0 0 5px #98b5e0; text-align: center; font: 28px/300px "microsoft yahei"; color: #fff; position: absolute; top: 0; left: 0; background: radial-gradient(circle, rgba(165, 193, 235, .5) 0%, rgba(134, 167, 218, .5) 50%); } .box .front { transform: translateZ(150px); } .box .back { transform: translateZ(-150px)rotateY(180deg); } .box .left { transform: translateX(-150px)rotateY(-90deg); } .box .right { transform: translateX(150px)rotateY(90deg); } .box .top { transform: translateY(-150px)rotateX(90deg); } .box .bottom { transform: translateY(150px)rotateX(-90deg); } /*inner*/ .inner { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; transform-style: preserve-3d; transform: rotateX(-25deg)rotateY(-45deg); animation: smallMove 5s infinite ease-in-out 2s; } .inner li { width: 100px; height: 100px; box-shadow: 0 0 2px #0b65ea; text-align: center; font: 28px/100px "microsoft yahei"; color: #fff; position: absolute; top: 0; left: 0; background: radial-gradient(circle, rgba(84, 153, 218, .5) 0%, rgba(73, 130, 215, .5) 50%); } .inner .front { transform: translateZ(50px); } .inner .back { transform: translateZ(-50px)rotateY(180deg); } .inner .left { transform: translateX(-50px)rotateY(-90deg); } .inner .right { transform: translateX(50px)rotateY(90deg); } .inner .top { transform: translateY(-50px)rotateX(90deg); } .inner .bottom { transform: translateY(50px)rotateX(-90deg); } </style> <div class="wrapper"> <div class="demo-container"> <ul class="box"> <li class="front"></li> <li class="back"></li> <li class="left"></li> <li class="right"></li> <li class="top"></li> <li class="bottom"></li> </ul> <ul class="inner"> <li class="front"></li> <li class="back"></li> <li class="left"></li> <li class="right"></li> <li class="top"></li> <li class="bottom"></li> </ul> </div> </div>
球旋转：
<style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #000; } .wrapper { width: 600px; height: 600px; margin: 0 auto; perspective: 1800px; } .demo-container { position: relative; width: 600px; height: 600px; overflow: hidden; } @keyframes boxXuanzhuan { 0% { transform: rotateX(50deg)rotateZ(170deg)rotateY(50deg); } 30% { transform: rotateY(50deg)rotateX(170deg)rotateZ(30deg); } 60% { transform: rotateZ(50deg)rotateY(170deg)rotateX(95deg); } 100% { transform: rotateX(50deg)rotateZ(170deg)rotateY(66deg); } } .box { width: 600px; height: 600px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -300px; /*transition: all 3s;*/ /*transform: rotateX(-134deg)rotateY(64deg);*/ transform-style: preserve-3d; animation: boxXuanzhuan 30s infinite ease alternate; } @keyframes liXuanZhuan { 0% { background: #acf91a; color: #00B700; border-radius: 50%; width: 50px; height: 30px; box-shadow: 0 0 10px #adff2f; } 30% { background: #f9641a; color: #f71af9; border-radius: 20%; width: 60px; height: 50px; box-shadow: 0 0 10px #818217; } 70% { background: #6932bf; color: #FFFFFF; border-radius: 50%; width: 50px; height: 50px; box-shadow: 0 0 10px #adff2f; } 100% { background: #acf91a; color: #00B700; border-radius: 10%; width: 50px; height: 30px; box-shadow: 0 0 10px #adff2f; } } .box li { background: #00FF99; position: absolute; width: 60px; height: 60px; left: 50%; top: 50%; margin-left: -30px; margin-top: -30px; font: 22px/60px "microsoft yahei"; color: #F08787; border-radius: 50%; text-align: center; animation: liXuanZhuan 20s infinite ease alternate; } .item1 { transform: translateZ(250px); } .item2 { transform: translateZ(-250px); } .item3 { transform: rotateY(90deg)translateZ(250px); } .item4 { transform: rotateY(-90deg)translateZ(250px); } .item5 { transform: rotateY(45deg)translateZ(-250px); } .item6 { transform: rotateY(-45deg)translateZ(-250px); } .item7 { transform: rotateY(45deg)translateZ(250px); } .item8 { transform: rotateY(-45deg)translateZ(250px); } .item9 { transform: rotateY(-45deg)rotateX(45deg)translateZ(250px); } .item10 { transform: rotateY(-135deg)rotateX(45deg)translateZ(250px); } .item11 { transform: rotateY(45deg)rotateX(45deg)translateZ(250px); } .item12 { transform: rotateY(135deg)rotateX(45deg)translateZ(250px); } .item13 { transform: rotateY(-45deg)rotateX(-45deg)translateZ(250px); } .item14 { transform: rotateY(-135deg)rotateX(-45deg)translateZ(250px); } .item15 { transform: rotateY(45deg)rotateX(-45deg)translateZ(250px); } .item16 { transform: rotateY(135deg)rotateX(-45deg)translateZ(250px); } .item17 { transform: rotateX(90deg)translateZ(250px); } .item18 { transform: rotateX(-90deg)translateZ(250px); } </style> <div class="wrapper"> <div class="demo-container"> <ul class="box"> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> <li class="item8"></li> <li class="item9"></li> <li class="item10"></li> <li class="item11"></li> <li class="item12"></li> <li class="item13"></li> <li class="item14"></li> <li class="item15"></li> <li class="item16"></li> <li class="item17"></li> <li class="item18"></li> </ul> </div> </div>