selector { transition : [transition property] [duration] [timing-function] [delay] }
四个参数说明如下:
-
transition property:指 将要对selector 的哪些属性值(多个用逗号隔开)的改变进行过渡处理,默认为all,即只要selector 的(任何一个)css属性发生变化(比如hover或click导致的background-color变化),则对此变化进行过渡处理(比如background-color 缓变 变色).(none:不对任何属性的变化进行过渡处理)
/* 对div 的 color 属性过渡持续时间为 1s,background-color 属性过渡持续时间为 10s (-moz前缀:注意在firefox下测试) */ <!DOCTYPE html> <html> <head> <style> body{ background : #ddd; } div{ background-color : #000; color : #fff; width : 400px; height : 70px; line-height : 70px; font-weight : bold; text-align : center; margin : 50px auto; /* transition */ -moz-transition:color 1s; -moz-transition:background 10s; } div:hover{ color : #000; background-color : #fff; } </style> </head> <body> <div>transition</div> </body> </html>
- duration:即 过渡的持续时间,默认为0.(值可为 1s/2s/3s/.....)
-
timing-function:ease(逐渐变慢)/linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(加速然后减速)/cubic-bezier(自定义时间曲线)
/* (-moz前缀:注意在firefox下测试) */ <!DOCTYPE html> <html> <head> <style> body{ background : #ddd; } div{ background-color : #000; color : #fff; width : 200px; height : 70px; line-height : 70px; font-weight : bold; text-align : center; position : absolute; top : 0;left : 0; } #ease { -moz-transition:all 4s ease; } #linear { -moz-transition:all 4s linear; } #ease-in { -moz-transition:all 4s ease-in; } #ease-out { -moz-transition:all 4s ease-out; } #ease-in-out { -moz-transition:all 4s ease-in-out; } div.click{ top : 0; left : 0; } div.clicked{ top : 500px; left : 500px; } </style> </head> <body> <div id="ease-in-out">ease-in-out</div> <div id="ease-out">ease-out</div> <div id="ease-in">ease-in</div> <div id="linear">linear</div> <div id="ease">ease</div> </body> <script> var ids = ['ease','linear','ease-in','ease-out','ease-in-out']; for(var idx in ids){ document.getElementById(ids[idx]).onclick = function(e){ this.className = (this.className == 'clicked' ? 'click' : 'clicked'); } } </script> </html>
- delay:延迟 几秒 后,开始过渡(默认 0,即立即执行过渡)
相关推荐
主要介绍了结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
css3实现简单动画导航按钮,主要运用了css3中的transition技术
学习css3简单变形效果,transition\transform的应用。
css-transition-lib 使用 jquery 承诺的强大功能为 css 转换提供一个简单的动画库。 当硬件或浏览器不支持 css 动画时,也会回退到 jQuery 的 animate 功能。 为便于使用,css 转换和 jQuery 的 animate() 函数之间...
纯实现CSS3创意导航菜单特效是一款通过CSS3 transform和transition方法实现的,非常简单。
HTML5+CSS3简单动画效果,涉及到transform、box-shadow、transition等等的基本运用
该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的...
AniX 是一个超级简单和轻量的 css transition 动画引擎,具有优秀的性能和良好的兼容性。最大限度的不破坏你的代码编写习惯。同时支持 umd、jquery、react 等多个版本。
这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。
它可以让网页上的图片倾斜任意的角度,其实在CSS3中实现图片的倾斜非常简单,我们并不需要利用复杂的JS计算各种角度,只要用CSS3的transition属性即可完成图片的倾斜效果,非常简单,具体实现大家可以看DEMO演示。
这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效。该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果。
这是一款炫酷的鼠标hover按钮CSS3动画特效。该按钮CSS3动画特效包括10种鼠标hover效果。按钮动画的制作通过CSS3 transition和keyframes帧动画完成。
CSS Transition 允许直接在 CSS 中编写简单的动画。 jQuery.fn.animate JavaScript 动画更简单、更快、更干净。 但有时我们需要在 JavaScript 中为 CSS Transitions 动画提供良好的完整回调。 这个 jQuery 插件允许...
transition-property 过渡效果的 CSS 属性的名称(height、width、opacity等)。 transition-duration 完成过渡效果需要时间。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 过渡效果...
这是一款比较简单代码简洁的CSS3导航菜单,通过CSS3 transform和transition方法实现,鼠标移至导航文字上出现文字倾斜以及线条效果。
利用 CSS3 的 Transition 属性,我们可以简单做出一个类似的搜索表单出来: HTML 标记: XML/HTML Code复制内容到剪贴板 <form action=# method=post class=searchForm> <label u00a0for=search>...
animation才是css3正宗的动画,主要是用于实现某种持续的动画效果(当然简单的过渡动画也可以实现),常用于自动触发的效果。例如加载中的持续动画效果等等。 在学习这两种动画之前要最好是先了解一下 transition-...
总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。 <transition name=你要的名字> 过渡的元素... </transition> 这里需要主要一点的是:过渡的元素只能是以下之一: 条件渲染 (使用...
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果。请注意,这个3D文字效果是用纯CSS的,没有用Javascript,...