CSS3 transition 属性过渡效果

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

http://www.w3school.com.cn/tiy/t.asp?f=css3_transition

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

#div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>

<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

http://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function3

时间： 2024-10-02 06:13:29

CSS3 transition 属性过渡效果的相关文章

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; -web

Transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.".而我个人则简单地理解为"在某个时间段内,平滑地改变某个CSS属性.". Transition又包含了四个子属性,分别为property.duration.timing-function.d

css3——transition属性和opacity属性

[transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time : 规定完成过渡效果需要花费的时间(以秒或毫秒计). 默认值是 0,意味着不会有效果. 该属性其实是transition属性的一个子属性,下面总结一下css3中的transition属性:[transition] 用于在一定的时间内平滑的过度,这种效果可以在鼠标单击,获取焦点,被点击或对元素任何改变中触发,并圆滑

css3 transition属性实现3d动画效果

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性. transition字面意思是变迁.变换.过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是: transition-property:指定过度的元素; 如:transition-property:background,就是指

css3 transition属性变化与animation动画的相似性以及不同点

下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transition属性变化效果第二个为animation动画效果是不是已经看出他们之间的相同与不同了吧.对的,他们都可以实现简单的动画效果,但transition变化效果当鼠标离开动画结束时,它还是会持续一段时间的动画并最终返回为元素的初始样式.animation动画效果则不是,当鼠标离开后它会之间立刻结束动

CSS3 transition 属性

transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值.” 一.transition语法: transition:[<transition-property>||<transition-duration>|| <transition-timing-function

数字滚动效果（CSS3 transition属性）

效果:初始化加载+定时刷新增加数值相关代码: 容器: <h2>不循环样式</h2>  <div class="scroll-number-0"></div> 引入js文件: <script type="text/javascript&q

CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速

transition:all 1s ease 1s ease: 1.ease:(逐渐变慢)默认值 2.linear:(匀速) 3.ease-in:(加速) 4.ease-out:(减速) 5.ease-in-out:(加速然后减速) 6.cubic-bezier 如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

CSS3 transition属性

Transition(过渡),设置过渡时间,(transition-duration) <head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200px;} </style> </head> &l

CSS3 transition 属性 过渡效果

CSS3 transition 属性 过渡效果的相关文章

CSS3 transition 属性过渡效果

CSS3 transition 属性过渡效果的相关文章