过渡（CSS3）

一、过渡（CSS3）

1、过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

2、过渡动画：是从一个状态渐渐的过渡到另外一个状态。

3、可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本），但是不会影响页面布局。

4、我们现在经常和 :hover 一起搭配使用。

5、语法格式：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

6、

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性	3
transition-property	规定应用过渡的CSS属性的名称	3
transition-duration	定义过渡效果花费的时间，默认是0	3
transition-timing-function	规定过渡效果的时间曲线，默认是“ease”	3
transition-delay	规定过渡效果何时开始，默认是0	3

 

 

 

 

 

 

 

 

 

 

 

7、属性

属性就是你想要变化的css属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个 all 就可以了。

8、花费时间

transition-duration 花费时间 单位是 秒 （必须写单位）s ms  比如0.5s，这个s单位必须写，ms毫秒

9、运动曲线，默认是 ease

运动曲线示意图：

 10、何时开始

默认是0s，鼠标触发就立即出发，可以设置延迟触发时间

 二、获得焦点元素

1、:focus 伪类选择器用于选取获得焦点的元素，这里主要针对的是表单元素

　  :hover

2、语法

　　input {

            border: 1px solid #ccc;

　　　 height: 30px;

　　　 width: 40px;

　　　 transition: all .5s;

        }

        

        input:focus {

            width: 80px;

            border: 1px solid red;

        }