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】是CSS（层叠样式表）的一个重要特性，它允许元素在不同状态之间平滑过渡，比如当鼠标悬停（hover）在按钮上时，可以创建出丰富的动画效果。在网页设计中，按钮是用户交互的重要组件，通过CSS3 ...
在本文中，我们将深入探讨如何使用CSS3的`transition`属性来创建动态的鼠标悬停效果，特别是针对图片标题的应用。CSS3的`transition`属性是实现平滑过渡的关键工具，它允许元素在两种状态之间平滑地变化，而不是立即...
结合使用CSS3的`transition`和jQuery，我们可以创建复杂的交互式动画，例如，当用户滚动页面时，元素可以平滑地淡入淡出，或者图片在加载时逐渐显现。这些效果可以增强用户与网页的互动性，提高网站的可访问性和用户...
在本文中，我们将深入探讨如何使用CSS3的transition属性创建引人注目的按钮动画特效，同时结合JavaScript和jQuery，以及HTML5的基础结构，为网页增添交互性和动态视觉效果。 首先，CSS3的`transition`属性是实现...
然后，使用jQuery来监听鼠标滑过事件，当事件触发时，通过CSS3 Transition改变对应的元素样式，例如增加新闻图片的大小，显示隐藏的详细信息，或者改变背景颜色等。在鼠标离开时，再通过反向的CSS3 Transition恢复...
**CSS3 Transition 按钮动画特效详解** 在网页设计中，CSS3的Transition（过渡）属性是一个强大的工具，它可以让我们轻松地为元素添加平滑的动态效果，特别是在按钮交互中，过渡效果能够显著提升用户体验。本文将...
总之，CSS3的`transition`特性为网页设计带来了丰富的动态效果，通过简单的CSS代码就能实现图片墙动画等复杂效果，大大提升了用户体验。通过不断学习和实践，我们可以创造出更多令人惊叹的视觉交互。
主要介绍了结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
总结起来，"纯CSS3实现简易3D按钮"是一个展示CSS3强大功能的实例，它利用了CSS3的`transform`、`box-shadow`和`transition`等特性，为网页元素带来了丰富的视觉效果和交互体验。对于开发者来说，掌握这些技术有助于...
【标题】"CSS3使用手册"揭示了对CSS3这一现代网页设计关键技术的全面理解和应用。CSS3（层叠样式表3）是CSS规范的最新版本，它极大地扩展了其前身CSS2的功能，引入了许多新的特性和改进，使得网页设计更为灵活、动态...
以上就是使用CSS3实现简单翻牌效果的基本步骤和涉及的技术点。这个效果可以通过调整样式和动画参数来适应各种设计需求，比如创建多张翻牌组成的网格，或者实现更复杂的3D翻转动画。通过深入理解和实践这些CSS3特性，...
通过这个简单的实例，我们可以看出CSS3的`transition`属性是如何让元素的样式变化变得平滑自然的。在实际开发中，`transition`常用于创建各种交互效果，比如按钮按下时的颜色变化、悬停时的缩放效果等，极大地丰富了...
本教程将深入探讨“div css3 transform和transition属性鼠标滑过动画效果”，这两个特性是实现动态交互效果的核心。 首先，`transform`属性允许我们对HTML元素进行二维或三维的变换，如旋转、缩放、移动和平移。它...
2. **边框与背景**：CSS3允许使用圆角边框（`border-radius`）、渐变背景（`linear-gradient`、`radial-gradient`）以及盒阴影（`box-shadow`），使得登录表单可以设计得更加立体和美观。 3. **动画与过渡**：通过`...
3. **CSS3伪类和过渡效果**：为了实现Tab切换的动态效果，我们可以使用`transition`属性。通过指定`transition-property`、`transition-duration`和`transition-timing-function`，我们可以定义元素在切换状态时的...
7. **动画与过渡**：CSS3的transition属性可实现元素状态改变时的平滑过渡效果，而animation则支持自定义复杂的动画序列，大大提升了网页的动态表现力。 8. **文字渲染**：CSS3提供了更多的字体控制选项，如@font-...
Transition属性是CSS3动画三大核心技术之一（Transform、Transition、Animation），它允许元素在不同状态间平滑地转换，而不仅仅局限于简单的显示和隐藏。本文将通过一个平滑过渡菜单栏的案例，深入解析Transition...
**纯CSS3制作简单的3D动画魔方** 在现代网页设计中，CSS3已经成为不可或缺的一部分，它提供了丰富的样式和强大的功能，其中之一就是3D转换。本教程将介绍如何利用CSS3来创建一个简单的3D动画魔方，无需JavaScript，...
在CSS3中，我们可以使用多种方式来实现切换效果，包括但不限于以下几种： 1. **伪类选择器**：CSS3引入了新的伪类选择器，如`:hover`, `:active`和`:focus`，它们分别在鼠标悬停、元素被激活（例如，点击或按下键盘...
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉表现手段，其中之一就是过渡（Transition）。本文将深入探讨“CSS3 transition按钮动画特效”这一主题，包括其基本概念、语法、应用场景以及如何...