多个属性一起动画示例
<body> <p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p> <div class="box"></div> </body>
.box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; -webkit-transition:width 2s, height 2s, //默认简写方法transition: <property> <duration> <time-funtion> <delay> background-color 2s, -webkit-transform 2s; //transform属性，定义位置改变 transition:width 2s, height 2s, background-color 2s, transform 2s; } .box:hover { background-color: #FFCCCC; width:200px; height:200px; -webkit-transform:rotate(180deg); //transform: rotate （角度） 定义旋转 transform:rotate(180deg); //transform属性同transition 一起可以实现很多常见的简单动画效果。 }
css transform 属性参考地址：http://www.w3school.com.cn/cssref/pr_transform.asp
trasform要注意浏览器前缀。
检测过渡是否完成
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:
propertyName字符串，指示已完成过渡的属性。
elapsedTime浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 transition-delay影响。
可以用 element.addEventListener() 方法来监听这个事件：
el.addEventListener("transitionend", updateTransition, true);
高亮菜单过渡效果
<div class="sidebar"> <p><a class="menuButton" href="home">Home</a></p> <p><a class="menuButton" href="about">About</a></p> <p><a class="menuButton" href="contact">Contact Us</a></p> <p><a class="menuButton" href="links">Links</a></p> </div>
.menuButton { position: relative; transition-property: background-color, color; //transition设置需要的属性，当设置属性样式发生改变时会执行transition transition-duration: 1s; transition-timing-function: ease-out; text-align: left; background-color: grey; left: 5px; top: 5px; height: 26px; color: white; border-color: black; font-family: sans-serif; font-size: 20px; text-decoration: none; box-shadow: 2px 2px 1px black; padding: 2px 4px; border: solid 1px black; } .menuButton:hover { position: relative; transition-property: background-color, color; //改变后的元素再次设置一次，则鼠标离开的时候也会有相同的过渡效果 transition-duration: 1s; transition-timing-function: ease-out; background-color:white; color:black; box-shadow: 2px 2px 1px black; }
transition 让 JavaScript 效果更平滑
transition 是非常好的工具，可以让 JavaScript 效果平滑而不用修改 JavaScript。
<p>随便点击某处来移动球</p> <div id="foo"></div>
var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ //监听点击的位置 f.style.left = (ev.clientX-25)+'px'; //改变style属性中对应的位置 f.style.top = (ev.clientY-25)+'px'; //-25则可以找到50px的小球的中点 },false);
p { padding-left: 60px; #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: all 1s; //transition： all 1s 所有可能改变的属性1s过度 }