CSS3 Transition详解
几个让人头大的单词,可能会混淆,尤其是你过一段不用的话肯定会搞不清各自的意思
transform
translate
transition 今天主要说transition 中文意思过渡,顺便在说一下transform 和translate,transform 是变形的意思,平移,缩放,旋转,扭曲都是变形的一种,translate 是平移的意思,translate 是属于transform 的一种,transform 跟 transition 是平级的概念。
transition 是过渡的意思,你会如果理解这个词,或者说提到这个这个词你会有什么反应,说实话,当我第一次接触到这个词属性的时候我有点蒙,单纯从字面上还是不太好理解,当我写了几个例子以后对这个东西有了直观的感受,过渡其实就是一段动画,例如有一段动画是一个矩形从坐标(0,0) 移动到了(100,100),你看到了这个移动的过程,那么这就是一种过渡,这时候有人会说过渡其实就是让你看到了transform的过程,例如你使用translate(100,100) 我们就可以通过transition 看到 translate 的过程,这个是可以的,transition 是可以对transform 的所有属性进行过渡,但是不是仅限于transform transform 更多是对形状上的变换,而transition 还可以对另外一大类颜色变换进行过渡,例如,一个div 是background 是红色,你后来修改为紫色,你就可以使用css3的transition 属性看到div 从红变紫色的过程,是不是很奇妙。
下边两个例子看看过渡的效果
transition 有几个重要的熟悉,transition-property ,transition-duration ,transition-time-function,transition-delay 四个参数
transition-property
这个参数是稍微最理解的一个,为什么要设置这个参数让你会感到困惑,这时候就要问自己几个问题
1:为什么需要过渡
2:过渡的结果是什么
第一个好回到,当然过渡就是为了效果更漂亮,
待续。。。。。。。。。。。。。。,iteye 的编辑器没办法插入script 控制代码,有些例子没法写进去
相关推荐
**CSS 动画详解** CSS(层叠样式表)作为一种强大的网页设计工具,不仅可以用于静态布局,还能赋予网页动态效果,让用户体验更加丰富和生动。CSS 动画就是这一功能的具体体现,它允许开发者通过时间轴来控制元素的...
《jQuery+CSS3数字滚动动画特效详解》 在网页设计中,动态效果的运用能够提升用户体验,增强视觉吸引力。"jQuery+CSS3数字滚动增加动画特效"就是一种常见且实用的技术,它使得数字的增加过程变得生动有趣,常用于...
《jQuery与CSS3结合打造的文字动画插件详解》 在当今网页设计中,动态效果的运用已经成为提升用户体验的重要手段之一。jQuery作为一个强大的JavaScript库,它简化了DOM操作,事件处理,动画效果等任务,而CSS3则为...
**CSS3 SVG 3D立体阴影文字动画特效详解** 在现代网页设计中,动态效果和交互性已经成为提升用户体验的关键因素。CSS3与SVG(可缩放矢量图形)的结合,为实现这样的效果提供了强大的工具。本文将深入探讨如何利用...
2. **淡入淡出效果**:CSS3的`opacity`属性配合`transition`属性可以实现元素的渐显渐隐,jQuery则控制何时开始和结束动画。 3. **3D翻转效果**:CSS3的`transform: rotateX()`和`rotateY()`可以创建出类似书本翻页...
《jQuery与CSS3结合实现的网页文字动画特效详解》 在网页设计中,动态效果能够提升用户体验,使得网站更具吸引力。jQuery 和 CSS3 是两种强大的技术,分别在JavaScript库和样式表领域占据重要地位。本篇文章将深入...
首先,CSS3弹动下拉菜单的核心在于运用了CSS3的过渡(Transition)、变换(Transform)以及动画(Animation)属性。这些特性赋予了元素动态变化的能力,让菜单在展开和收起时呈现出弹性效果。 1. 过渡(Transition...
2. **自定义属性**:用户可以根据需要选择任何CSS3可动画化的属性进行过渡,如`transform`、`opacity`、`width`等。 3. **事件触发**:插件支持多种事件触发过渡,如点击、滚动、加载完成等,提供了丰富的API接口供...
《CSS3文字上下滚动切换特效详解》 在网页设计中,动态效果的运用能极大地提升用户体验,其中文字滚动切换特效就是一个常见的元素。本篇文章将详细解析"css3文字上下滚动切换特效",并探讨如何利用jQuery和CSS3实现...
《jQuery与CSS3结合打造3D方块飘落动画特效详解》 在现代网页设计中,动态效果的运用能够极大地提升用户体验,使网页更具吸引力。本篇将详细讲解如何利用jQuery和CSS3技术,实现一个酷炫的3D方块飘落动画特效,帮助...
《jQuery+CSS3相册图片叠加堆放展开动画特效详解》 在前端开发中,动态效果是提升用户体验的重要手段,而jQuery与CSS3的结合更是能创造出丰富多样的动画特效。本教程将深入解析一个名为“jQuery+css3相册图片叠加...
以下是关于CSS3和SVG这两个核心技术以及如何结合它们来实现超人飞行动画的知识点详解。 **CSS3(层叠样式表第三版)** CSS3是Web样式语言CSS的最新版本,它引入了许多新的特性和改进,增强了网页设计的灵活性和...
**jQuery+CSS3矩阵数字排列动画详解** 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。"jQuery+CSS3矩阵数字排列自动查找动画特效"就是一种这样的设计手法,它结合了JavaScript库jQuery的强大功能和...
《JS + CSS3 3D波浪动画焦点图轮播切换特效详解》 在Web开发领域,动态视觉效果是提升用户体验的重要手段之一。"js+css3 3D波浪动画焦点图轮播切换特效"就是一个这样的实例,它巧妙地结合了JavaScript(简称JS)与...
《jQuery与CSS3结合实现弹跳球碰撞动画特效详解》 在Web开发中,动态效果是提升用户体验的重要手段。本文将深入探讨如何利用jQuery库和CSS3技术来创建一个生动有趣的弹跳球碰撞动画特效。这个特效适用于网页游戏、...
**jQuery+CSS3环形旋转切换特效JS代码详解** 在网页设计中,吸引用户的注意力并提供独特的用户体验至关重要。"jQuery+CSS3环形旋转切换特效"是一种创新的展示方式,常用于产品展示、图片轮播或者功能介绍等场景。...
《JS+CSS3网页左侧滑动菜单动画特效详解》 在网页设计中,交互性和用户体验是至关重要的元素,其中滑动菜单作为一种常见的导航方式,能够有效地提升网站的易用性。"js+css3网页左侧滑动菜单动画特效.zip"正是这样一...
- **jQuery动画**:使用`.animate()`方法,结合CSS3动画,可以创建更复杂的动画效果。 ### 文件结构分析 - `index.html`: 主要HTML文件,包含插件运行所需的DOM结构。 - `style.css`: CSS文件,定义了时钟的样式和...
《jQuery CSS3催眠怀表摇摆动画特效详解》 在网页设计中,动态效果的运用可以提升用户体验,增加互动性。"jQuery CSS3催眠怀表摇摆动画特效"正是这样一种技术融合的体现,它巧妙地结合了jQuery的便利性和CSS3的强大...
4. **动画效果**:利用CSS3的`transition`属性和jQuery的`animate()`方法,创建翻页动画。可以设置不同的动画参数,如持续时间、延迟、速度曲线等,以达到理想中的翻页动态效果。 5. **隐藏侧边栏菜单**:如果存在...