简单动画
（1）简单动画通常称之为“过渡transition”
Transition-property：需要过渡的属性，但是并非所有的属性都支持过渡。
Transition-duration：过渡的时间；
简写：transition：all 时间；
（2）渐变时间函数
Transition-timing-function——CSS属性以何种速度进行渐变
贝塞尔曲线的预设值：
ease：渐快，匀速，减慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in：渐快，匀速（cubic-bezier(0.42,0,1,1)）
ease-out：匀速，减慢（cubic-bezier(0,0,0.58,1)）
ease-in-out：和ease类似，相比ease的加速度大（幅度大）（cubic-bezier(0.42,0,0.58,1)）
linear：全程匀速（cubic-bezier(0,0,1,1)）
以下代码所示，第一部分展示的是一个，当鼠标移动到图片上时，显示另一张（底下）的图片；
1 DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>动画和变形练习title> 9 head> 10 <style> 11 /* 第一个部分，设置当鼠标滑动到图片上时，显示底下的图片 */ 12 13 .box { 14 width: 300px; 15 height: 300px; 16 position: relative; 17 } 18 19 .box img { 20 width: 300px; 21 height: 300px; 22 position: absolute; 23 left: 0; 24 top: 0; 25 } 26 27 .show1 { 28 transition: all 3s; 29 } 30 31 .show1:hover { 32 opacity: 0; 33 } 34 353639 40 4137
38