Github： https://github.com/younglaker
微博:江小湖Laker
本文讲介绍 :hover、 :active、 :focus、 :checked、 Media Queries、 JavaScript控制六种方法触发CSS3 transition，以及 transitionend事件的使用。
最常见的是用hover：
:hover.hover { width: 100px; height: 100px; background: #222; color: white; text-align: center; transition: all 2s ease;}.hover:hover { width: 200px; height: 200px;}mousedown s时触发：
:active.active { width: 100px; height: 100px; background: #222; color: white; text-align: center; transition: all 2s ease;}.active:active { width: 200px; height: 200px;}文本框聚焦时（这个在很多网站的搜索框的动画效果里用到）：
.focus input, .focus textarea { width: 200px; transition: width 1s ease;}.focus input:focus, .focus textarea:focus { width: 300px;}用于checkboxes 和 radio buttons 被选中时：
Input 1
Input 2
Input 3
Input 4
input[type="checkbox"]:checked { height: 20px; transition: all 1s ease;}input[type="checkbox"]:checked { width: 30px;}
改变浏览器窗口大小时触发：
media.media { width: 200px; height: 200px; background: #222; color: white; text-align: center; transition: width 1s ease;}@media only screen and (max-width : 960px) { .media { width: 100px; height: 100px; }}通过 JavaScript 或者 jQuery 添加、删除class来完成动画，CSS格式类似 :hover。
例如：
以 click 事件为例，当点击方块时，变化长宽、背景色：
HTML:
CSS:
.box { width: 200px; height: 200px; background: black; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}.box.clicked { width: 300px; height: 300px; background: blue;}JavaScript：
$(".box").click(function() { $(this).toggleClass("clicked");});如果用原生JavaScript，可以自己写个添加和删除类的函数。
transitionend 事件会在 CSS transition 结束后触发。兼容Chrome、Firefox、Safari、IE10+：
element.addEventListener('transitionend', callback, false);为保证低版本兼容性可以写webkitTransitionEnd（WebKit ）、otransitionend（Opera）、MSTransitionEnd（IE 10+）、transitionend（Mozilla）。 详见此讨论。
有没有渐变开始的事件？目前只有IE 10+ 有 transionstart 事件，W3C目前未有此标准。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
