transition css_前端程序员动画大法之过渡动画-transition

css升级到css3以后，标准里面对动画进行了大幅度增强。 增加了两个重要特性

1. transition 我理解为过渡动画

2. animation 帧动画

transition 用于做一次性动画；

animation 一次性动画 和 循环动画

transition基本使用

1. transition-property 属性

2. transition-duration 时间

3. transition-timing-function 动画类型

4. transition-delay 动画延迟

transition-property指定需要过渡的CSS属性

并不是所有属性都能过渡的，

只有能数字量化的CSS属性才能过渡

例如：

color，background-color，width,height等

transition-timing-function 常用动画类型函数

* linear

* ease

* ease-in

* ease-out

* ease-in-out

我们实际使用写一个效果

例如鼠标悬停，图片放大，像小米官网的商品列表鼠标悬停效果。

鼠标悬停和离开都有一个过渡效果

一般会用到hover属性，hover属性的属性值会立即执行。

使用了 transition，hover的属性值可以过渡的方式进行执行

需要在执行过渡的元素上先声明过渡的各个参数

img{transition：all 0.3s ease;width:100px;height:100px;}

img:hover{width:200px;height:200px;}