CSS 动画效果

总体来说两类：1. transition: 从一个样式到另外一个样式的过渡过程width：过渡需要的时间linear: 匀速过度  transition: 1s linear; 匀速过渡，而且时长2sease: 慢速开始，然后加快，然后慢速结束ease-in: 慢速开始ease-out: 慢速结束ease-in-out: 慢速开始和结束例子：.div1{width: 100px; transition: 1s linear;} .div1:hover{width:500px;}过渡的属性可以是宽高，字体颜色，背景色等2. transform：从一个位置到另外一个位置，通常结合transition来使用①旋转
      rotate(30deg) 正值是顺时针      rotateX(30deg)      rotateY(30deg)② 移动     translate(x,y) 正值是向右，向下
     translate3d(x,y,z)     translateX     translateY     translateZ③ 缩放    scale(x,y) x,y 是倍数，可以是负值
     scaleX     scaleY例子：鼠标移入时元素从最下面没有慢慢滑入的效果

1. .div1{  
2.     width:100px;height:200px;background:pink;  
3.     position:relative;  
4.     overflow: hidden;  
5.     transition:1s;  
6. }  
7. .div1 p{  
8.     margin:0;  
9.     height:50px;position:absolute;  
10.     bottom:-50px;left:0;right:0;  
11.     background:red;  
12.     transition:1s;  
13. }  
14. .div1:hover{  
15.     transform: translateY(10px);  
16.     <span style="color:#FF0000;">box-shadow:0 10px 20px gray;</span> /* 右，下，模糊半径，阴影颜色*/  
17. }  
18. <span style="color:#FF0000;">.div1:hover p{</span> /* 鼠标移到div1上对内部的p书写样式*/  
19.     transform: translateY(-50px);  
20. }  

1. <div class="div1">  
2.     <p>好好学习，天天向上</p>  
3. </div>