过渡的触发机制: 
伪类触发 
：hover 
：active 
：focus 
：checked 
媒体查询：通过@media属性判断设备的尺寸，方向等 
JavaScript触发：用JavaScript脚本触发 
示例: 
/*设置过渡*/ 
img {  
   /*为防止浏览器兼容性，需要加上前缀*/ 
            -moz-transition: all 0.8s ease-in-out;   /* Firefox浏览器 */ 
            -webkit-transition: all 0.8s ease-in-out;   /* Chrome浏览器 */ 
            -o-transition: all 0.8s ease-in-out;    /* Opera浏览器 */ 
            transition: all 0.8s ease-in-out; 
        } 
/*触发过渡 旋转360度并放大1.5倍*/ 
img:hover { 
   /*为防止浏览器兼容性，需要加上前缀*/ 
            -moz-transform: rotate(360deg) scale(1.5); 
            -webkit-transform: rotate(360deg) scale(1.5); 
            -o-transform: rotate(360deg) scale(1.5); 
            -ms-transform: rotate(360deg) scale(1.5); 
            transform: rotate(360deg) scale(1.5); 
        }

伪类触发：:hover :active :focus :checked等

媒体查询触发

JavaScript触发

1.过渡
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

语法:    transition:[transition-property  transition-duration  transition-timing-function   transition-delay ] 

transition-property  ----过渡或动态模拟的CSS属性
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

transition-duration  ----完成过渡所需要的时间
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

transition-timing-function ----指定过渡函数
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

transition-delay ----过渡开始出现的延迟时间
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

2.过渡的触发机制:
伪类触发
：hover
：active
：focus
：checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发

示例:
/*设置过渡*/
img { 
   /*为防止浏览器兼容性，需要加上前缀*/
            -moz-transition: all 0.8s ease-in-out;   /* Firefox浏览器 */
            -webkit-transition: all 0.8s ease-in-out;   /* Chrome浏览器 */
            -o-transition: all 0.8s ease-in-out;    /* Opera浏览器 */
            transition: all 0.8s ease-in-out;
        }
/*触发过渡 旋转360度并放大1.5倍*/
img:hover {
   /*为防止浏览器兼容性，需要加上前缀*/
            -moz-transform: rotate(360deg) scale(1.5);
            -webkit-transform: rotate(360deg) scale(1.5);
            -o-transform: rotate(360deg) scale(1.5);
            -ms-transform: rotate(360deg) scale(1.5);
            transform: rotate(360deg) scale(1.5);
        }

伪类触发
：hover
：active
：focus
：checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发

示例:
/*设置过渡*/
img { 
   /*为防止浏览器兼容性，需要加上前缀*/
            -moz-transition: all 0.8s ease-in-out;   /* Firefox浏览器 */
            -webkit-transition: all 0.8s ease-in-out;   /* Chrome浏览器 */
            -o-transition: all 0.8s ease-in-out;    /* Opera浏览器 */
            transition: all 0.8s ease-in-out;
        }
/*触发过渡 旋转360度并放大1.5倍*/
img:hover {
   /*为防止浏览器兼容性，需要加上前缀*/
            -moz-transform: rotate(360deg) scale(1.5);
            -webkit-transform: rotate(360deg) scale(1.5);
            -o-transform: rotate(360deg) scale(1.5);
            -ms-transform: rotate(360deg) scale(1.5);
            transform: rotate(360deg) scale(1.5);
        }

使用 :hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的。

和普通过渡一样，先创建两个样式规则，一个是元素的初始状态，一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。

原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_986.html

1.过渡
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

语法:    transition:[transition-property  transition-duration  transition-timing-function   transition-delay ] 

transition-property  ----过渡或动态模拟的CSS属性
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

transition-duration  ----完成过渡所需要的时间
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

transition-timing-function ----指定过渡函数
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

transition-delay ----过渡开始出现的延迟时间
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

2.过渡的触发机制:
伪类触发
：hover
：active
：focus
：checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发