CSS 动画效果

总体来说两类：

1. transition: 从一个样式到另外一个样式的过渡过程

width：过渡需要的时间

linear: 匀速过度  transition: 2s linear; 匀速过渡，而且时长2s

ease: 慢速开始，然后加快，然后慢速结束

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

例子：鼠标移入时元素从最下面没有慢慢滑入的效果

.div1{
    width:100px;height:200px;background:pink;
    position:relative;
    overflow: hidden;
    transition:1s;
}
.div1 p{
    margin:0;
    height:50px;position:absolute;
    bottom:-50px;left:0;right:0;
    background:red;
    transition:1s;
}
.div1:hover{
    transform: translateY(10px);
    box-shadow:0 10px 20px gray; /* 右，下，模糊半径，阴影颜色*/
}
.div1:hover p{ /* 鼠标移到div1上对内部的p书写样式*/
    transform: translateY(-50px);
}

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