浏览器支持情况:
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
all 0 ease 0 |
no |
CSS3 |
object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
例:
把鼠标指针放到 div 元素上,其高度会从 100px 逐渐变为 350px:
div { height:100px; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari 和 Chrome */ -o-transition: height 2s; /* Opera */ } div:hover{ height:350px; }
相关推荐
CSS3基础知识教程transition属性过渡动画效果等 CSS3基础知识教程transition属性过渡动画效果等
纯css3 transition动画过渡属性制作鼠标悬停图片标题
纯CSS3 transition属性鼠标经过酷炫按钮动画特效
CSS3 transition动画属性制作鼠标悬停放大图片倾斜效果
CSS3 transition属性单页模板鼠标悬停导航菜单文字动画
div css3 transform和transition属性鼠标滑过动画效果 div css3 transform和transition属性鼠标滑过动画效果
CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
css3 transition属性鼠标悬停图标按钮动画提示框效果
21种css3 transition属性鼠标悬停导航条动画效果
div css3 transition过渡属性制作水平图片手风琴 div css3 transition过渡属性制作水平图片手风琴 div css3 transition过渡属性制作水平图片手风琴
transition属性的值包括以下四个: •transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。 •transition-duration:指定属性过渡的...
一、对transition属性的认识 1、transition 属性是一个简写属性,可用于设置四个过渡属性: transition-property 过渡效果的 CSS 属性的名称(height、width、opacity等)。 transition-duration 完成过渡效果...
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下: CSS Code复制内容到剪贴板 transition: property duration timing-function delay; /...
定义和用法transition 属性是一个简写属性,用于设置四个过渡属性:transition-propertytransition-durationtransition-timing-functiontransition-delay注释:请始终设置 transition-duration 属性,否则时长为 0,...
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说...值描述transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing
CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果,需要的朋友参考下本
代码简介: 纯CSS3鼠标滑过动画按钮特效是一款基于CSS3 transition属性实现的按钮动画特效。
最近在项目中用到了CSS3中的动画属性。无奈对于css3几个新加的属性不太熟悉,常常容易搞混。所以从网站研究了点资料,总结一下,方便有需要的朋友们可以参考学习。
CSS3实现3D立方体动画效果,包括animation,transition,transform等属性的使用。