CSS3中新增的transform属性,实现了元素在变化过程中的过渡效果,实现了基本的
动画。
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
规定设置过渡效果的 CSS 属性的名称。
- transition-duration
规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function
规定速度效果的速度曲线。
①linear:线性过渡。
②ease:平滑过渡,这是默认值
③ease-in:由慢到快。
④ease-out:由快到慢。
⑤ease-in-out:由慢到快再到慢。- transition-delay
定义过渡效果何时开始。
浏览器兼容性问题
基于webkit内核的私有属性是:-webkit-transition;
基于gecko内核的私有属性是:-moz-transition;
基于prestot内核的私有属性是:-o-transition;
实例:
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }
手风琴案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ text-align: center; margin: 0px; padding: 0px; } li{ list-style:none;; height: 30px; } .mennu{ height: auto; width: 250px; margin: 50px auto; } .item{ width: 100%; height: auto; } .item:hover > .itemBox{ height: 120px; } .item > h3{ background-color: skyblue; color: orange; height: 40px; line-height: 40px; border-bottom: 2px solid #ccc; } .item >.itemBox{ width: 100%; height: 0; overflow: hidden; /*添加过渡效果*/ transition-property: height; transition-duration: 1s; } .item >.itemBox >ul{ background-color: yellowgreen; } </style> </head> <body> <div class="mennu"> <div class="item"> <h3>国际新闻</h3> <div class="itemBox"> <ul> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> </ul> </div> </div> <div class="item"> <h3>国内新闻</h3> <div class="itemBox"> <ul> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> </ul> </div> </div> <div class="item"> <h3>省内新闻</h3> <div class="itemBox"> <ul> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> </ul> </div> </div> <div class="item"> <h3>市内新闻</h3> <div class="itemBox"> <ul> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> <li>深圳市遇到有史以来最大台风</li> </ul> </div> </div> </div> </body> </html>
效果图