css学习笔记——CSS3 transition 属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css学习笔记——CSS3 transition 属性相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3 transition 属性</title> <style> .box{ width:100px; height:100px; background:red; -webkit-transition:1s; /* Safari 和 Chrome */ -moz-transition:1s;/* Firefox 4 */ -o-transition:1s;/* Opera */ transition:1s;/*正常情况*/ } .box:hover{ width:200px; height:200px; background:blue; } </style> </head> <body> <div class="box"></div> </body> </html>
transition 属性是一个简写属性，用于设置四个过渡属性：
语法：
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
用js操作时需要首字母转大写
WebkitTransition
MozTransition
OTransition
参考资料
妙味课堂
http://www.w3school.com.cn/cssref/pr_transition.asp
更详细资料
http://www.w3cplus.com/content/css3-transition
以上是关于css学习笔记——CSS3 transition 属性的主要内容，如果未能解决你的问题，请参考以下文章