CSS3 transition 属性过渡效果 详解
2014-04-15 10:59
615 查看
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。
浏览器支持:
Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本不支持 transition 属性。Chrome 25 以及更早的版本,需要前缀 -webkit-。
语法:
transition 属性主要包含四个属性值:transition-property -- 规定应用过渡的 CSS 属性的名称;transition-duration -- 定义过渡效果花费的时间,默认是 0;transition-timing-function -- 规定过渡效果的时间曲线。默认是 "ease";transition-delay -- 规定过渡效果何时开始,默认是 0。transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。
示例:
由于CSDN无法加入自定义样式,所以效果示例请移步http://www.itechzero.com/front-end/css3/css3-transition-property-transition-effect-explain/查看。
一、改变宽度属性
div.css3-transition-test1 { transition-property: width; transition-duration: 1s; transition-timing-function: ease-in; transition-delay: 0; /* Firefox 4 */ -moz-transition-property: width; -moz-transition-duration: 1s; -moz-transition-timing-function: ease-in; -moz-transition-delay: 0; /* Safari and Chrome */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 0; /* Opera */ -o-transition-property: width; -o-transition-duration: 1s; -o-transition-timing-function: ease-in; -o-transition-delay: 0; }或
div.css3-transition-test1 { transition: width 1s ease-in; -moz-transition: width 1s ease-in; /* Firefox 4 */ -webkit-transition: width 1s ease-in; /* Safari and Chrome */ -o-transition: width 1s ease-in; /* Opera */ }
二、改变多个属性
p.css3-transition-test2 { -webkit-transition: -webkit-transform 1s, opacity 1s, background 1s, width 1s, height 1s, font-size 1s; -moz-transition-property: width, height, -o-transform, background, font-size, opacity; -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; -o-transition-property: width, height, -o-transform, background, font-size, opacity; -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; transition-property: width, height, transform, background, font-size, opacity; transition-duration: 1s, 1s, 1s, 1s, 1s, 1s; } p.css3-transition-test2:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }阅读更多
相关文章推荐
- CSS3 transition 属性过渡效果 详解
- CSS3 transition 属性 过渡效果
- CSS3属性transition(过渡)详解
- 不要忘了css3动画效果transform 和过渡效果 transition:属性 时间 运动效果 延迟时间;
- transition属性——css3过渡效果
- 详解css3中transition过渡属性
- css3中transition属性详解
- CSS3的过渡效果(transition)与动画(animation)
- css3中的transition渐变过渡属性的认识.
- CSS3中的Transition属性详解
- CSS3中Transition属性详解以及示例分享
- css3中transition属性详解
- CSS3:Transition属性详解
- CSS3中的transition属性详解
- CSS3快速上手之14:过渡属性(transition)
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
- CSS3过渡动画transition详解
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 采用 clip 属性和 CSS3-transition 产生动态效果注意问题
- css3 Transition属性(平滑过渡菜单栏案例)