css：过渡transition

一、过渡（transition）

过渡是css3新增属性值一。过渡：通过增加过渡效果将元素从一种样式平滑过渡为另一种样式（不使用flash以及JavaScript）。

现在通常与** :hover** 定义的选择器一起使用，来达到鼠标悬停某个元素时实现过渡效果。

1.css的过渡属性

1.transition：简写属性，用于将下面四个过渡属性设置为单一属性。
2.transition-delay：设置过渡效果的延时时间。
3.transition-duration：设置过渡效果持续的时间。默认值为0
4.transition-property：设置过渡效果所要应用的css属性。
5.transition-timing-function：设置过渡效果的速度曲线。

2.实现过渡效果所必须的两个属性

1.过渡效果所要应用的css属性（transition-property）
2.过渡效果的持续时间（transition-duration）

将鼠标移入之后，div的宽度高度变为300px且背景颜色由粉红色变为蓝色，持续时间为3s。

 div{
    
    
        width:100px;
        height: 100px;
        background-color: pink;
        transition: width 2s ,height 2s,background-color 2s;
    }
    div:hover{
    
    
        width: 300px;
        height: 300px;
        background-color: blue;
    }
<div>
  这是一个div
</div>

也可分开写：

  div{
    
    
        width:100px;
        height: 100px;
        background-color: pink;
        transition-duration: 2s;
        transition-property: width,height,background-color;
    }
    div:hover{
    
    
        width: 300px;
        height: 300px;
        background-color: blue;
    }

效果图为：

3.transition-delay延迟过渡时间

设置过渡的延迟效果

  div{
    
    
        width:100px;
        height: 100px;
        background-color: pink;
        transition-duration: 2s; //过渡持续时间2s
        transition-property: width,height,background-color; //过渡的属性：改变宽度、高度、背景颜色
        transition-delay: 1s;  //延迟1s之后再过渡
    }
    div:hover{
    
    
        width: 300px; 
        height: 300px;
        background-color: blue;
    }

效果图为：

4.transition-timing-function设置速度曲线

设置过渡的速度曲线

扫描二维码关注公众号，回复： 16317918 查看本文章

属性有：
ease：先缓慢地开始，然后加速，然后缓慢地结束（这是默认的效果）
linear：线性速度，一直以同样的速度
ease-in ：规定缓慢开始的过渡效果
ease-out ： 规定缓慢结束的过渡效果
ease-in-out： 规定开始和结束较慢的过渡效果

transition-timing-function: ease;

效果图：

transition-timing-function: linear;

效果图：

transition-timing-function: ease-in;

效果图：

transition-timing-function: ease-out;

效果图：

transition-timing-function: ease-in-out;

效果图：

5.transition的简写

语法：

//transition:css属性 持续时间 速度曲线 延迟时间
//transition：transition-property,transition-duration,transition-timing-function,transition-delay;
transition: width 2s linear 1s,height  2s linear 1s,background-color  2s linear 1s;

效果图：