对css中的transition(过渡)-transform(转换)-animation(动画)认识的不够清楚，今天就放一起集中解决了。
1.transition-过渡
元素属性的过渡效果，通常配合hover实现元素初始样式到hover中样式的过渡，语法如下：
1 transition: property duration timing-function delay;
property：属性，可以写all
duration：持续时间
timing-function：变化的曲线
delay：延迟
transition
元素属性transition要定义在元素的初始样式内，hover内写目标属性值
1 div 2 { 3 width:100px; 4 transition: width 2s; 5 } 6 div:hover {width:300px;}
2.transform-转换
2D转换有元素旋转(rotate)，缩放(scale)，移动(translate)
1 transform: rotate(45deg); /*旋转的单位为deg*/ 2 transform: scale(1.2); /*缩放的倍数，1是原始大小*/ 3 transform: translate(20px, 20px); /*参数分别是水平方法和垂直方向移动的数值，移动的单位可以为像素，也可以为百分比，特别注意以百分比为单位时是相对于自身的百分比*/
3.animation-动画
需要先定义关键帧(keyframes)动画，然后绑定到元素。
关键帧keyframes的定义：
1 /* @keyframes 后是动画名称， 不同的百分比对应动画过程中不同的状态，0%是开始，100%是结束*/ 2 @keyframes animationname { 3 0% { 4 background-color: #fff; 5 } 6 50% { 7 background-color: #ff4500; 8 } 9 100% { 10 background-color: #ffb90f; 11 } 12 }
动画的调用：
1 /*语法animation: name duration timing-function delay iteration-count direction fill-mode play-state; 2 name ：关键帧动画的名称 3 duration ：单次动画的持续时长 4 timing-function：速度曲线，如linear或ease 5 iteration-count：动画播放次数，数字或infinite即无限次 6 */ 7 div 8 { 9 animation:animationname 5s; 10 }
完整示例如下，复制后放入HTML文件中用浏览器打开即可看到效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>过渡-变换-动画</title> 7 <style> 8 div { 9 color: #fff; 10 margin-top: 30px; 11 } 12 13 /* transition 通常配合hover使用，语法transition: 属性 时间 过渡曲线; 14 也可以transition: all 时间 过渡曲线; 过渡曲线可省略 15 hover时transition的属性有过渡效果，没有加过渡的其他一次性改变 */ 16 .box1 { 17 height: 100px; 18 width: 100px; 19 background-color: #ffc0cb; 20 /* transition: width 2s ease; */ 21 /* transition: border 2s ease; */ 22 /* transition: padding 2s ease; */ 23 transition: all 2s ease; 24 } 25 26 .box1:hover { 27 padding: 10px; 28 border: 10px solid #333; 29 height: 80px; 30 width: 80px; 31 background-color: #87ceeb; 32 } 33 34 /* transfrom 2d 主要有三种变换 translate平移 rotate旋转 scale缩放 35 transform-origin可以设置变换的中心点 36 而且translate在以百分比%为单位时是相对于自身的，可以结合绝对定位实现居中top:50%; left:50%; transform: translate(50%, 50%); 37 transfrom不会影响其他盒子 */ 38 .box2 { 39 width: 100px; 40 height: 100px; 41 background-color: #87ceeb; 42 /* transform: translate(50%, 50%); */ 43 transform: rotate(45deg); 44 /* transform: scale(1.2); */ 45 } 46 47 /* animation需要先定义关键帧动画，然后再通过动画名称调用，设置动画时长 */ 48 @keyframes run { 49 0% { 50 transform: translate(0); 51 } 52 100% { 53 transform: translate(200px); 54 } 55 } 56 @keyframes bgc { 57 0% { 58 } 59 50% { 60 background-color: #ff4500; 61 } 62 100% { 63 background-color: #ffb90f; 64 } 65 } 66 @keyframes rotateAnimation { 67 0% { 68 } 69 100% { 70 transform: rotate(360deg); 71 } 72 } 73 .box3 { 74 width: 100px; 75 height: 100px; 76 background-color: #90ee90; 77 animation-name: run, bgc; 78 animation-duration: 2s; 79 } 80 /* animation: rotateAnimation 2s infinite linear; 81 rotateAnimation是定义的关键帧动画名称，2s一次动画的时候，infinite永久循环，linear线性变化 */ 82 .box3:hover { 83 animation: rotateAnimation 0.2s infinite linear; 84 } 85 </style> 86 </head> 87 <body> 88 <div class="box1"> 89 过渡 transition 90 </div> 91 <div class="box2"> 92 变换 transform 93 </div> 94 <div class="box3"> 95 动画 animation 96 </div> 97 </body> 98 </html>