css过渡

本节主要简单介绍css过渡

css过渡属性有一下四种：

 1.transition-propeoty：检索或者设置对象中毒的参与过渡的属性

2.transition-duration：检索或者设置对象过渡的持续时间

3.transition-delay：检索或者设置对象延迟过渡的时间

4. transition-timing-function：检索或设置对象中过渡的动画类型

如下图举例：

 

 

这种写的方法是比较麻烦的，单词量也很大，还有简写的方法，把这些属性写在一起。

简写方法：

        transition: 属性值1  属性值2  属性值3  属性值4

            属性值1： 需要参与过渡属性   all  ( 能支持过渡属性的都会过渡变换  默认值)

            属性值2： 过渡的时间   s秒   ms  毫秒

            属性值3： 延迟的时间   s秒   ms  毫秒

            属性值4： 动画的类型（匀速、匀加速、匀减速........）

                             linear   匀速 --匀速用的比较多

案例如下

如果显示不出来也有可能存在浏览器不兼容的情况，可加浏览器前缀。

常见浏览器前缀：

       -webkit-    谷歌浏览器

       -moz-       火狐浏览器

       -ms-        IE浏览器

       -O-         欧鹏浏览器

 

小结：通过本节的记录了解到transition是用来过渡的，在日常的操作中一般用到过渡时间，所以一般会写到transition:2s

注：transition  必须通过鼠标事件触发（鼠标滑过   ）