`

css3动画系列之transition 属性

阅读更多

浏览器支持情况:

 

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

默认值: 继承性: 版本: JavaScript 语法:
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(过渡)属性是其中的一个重要特性,它允许元素从一种样式平滑地过渡到另一种...

    HTML5&CSS3网页制作:transition属性.pptx

    HTML5的transition属性是CSS3中的一个核心特性,它允许元素在不同的状态之间平滑地过渡,而不是立即改变。这个属性极大地增强了网页的交互性和视觉吸引力。本文将深入讲解transition属性的定义、用法以及一些关键...

    纯css3 transition动画过渡属性制作鼠标悬停图片标题

    在本文中,我们将深入探讨如何使用CSS3的`transition`属性来创建动态的鼠标悬停效果,特别是针对图片标题的应用。CSS3的`transition`属性是实现平滑过渡的关键工具,它允许元素在两种状态之间平滑地变化,而不是立即...

    纯CSS3 transition属性鼠标经过酷炫按钮动画特效

    在"纯CSS3 transition属性鼠标经过酷炫按钮动画特效"这个示例中,我们可能有以下代码结构: ```html 点击我 ``` ```css .cool-button { /* 按钮的基本样式 */ background-color: #333; color: #fff; padding: ...

    css3 transition属性鼠标悬停图标按钮动画提示框效果

    在本案例中,“css3 transition属性鼠标悬停图标按钮动画提示框效果”指的是利用CSS3的`transition`属性,当鼠标悬停在图标按钮上时,实现平滑的动画效果,并显示提示框信息。 1. **CSS3 Transition基础** - `...

    详解css3 Transition属性(平滑过渡菜单栏案例)

    CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...

    21种css3 transition属性鼠标悬停导航条动画效果

    在这个主题“21种css3 transition属性鼠标悬停导航条动画效果”中,我们将探讨如何利用CSS3的transition属性来创建各种各样的导航条动画效果,提升用户体验。 首先,我们要理解transition属性的基本语法: ```css ...

    css3动画系列示例包

    在描述中提到的"css动画代码,一些demo"表明,这个压缩包包含了一系列的实例代码,这些代码是实际运行的示例,可以帮助学习者理解并应用CSS3动画。每个示例可能都是一个单独的CSS3动画效果,如旋转、平移、缩放、...

    div css3 transform和transition属性鼠标滑过动画效果

    本教程将深入探讨“div css3 transform和transition属性鼠标滑过动画效果”,这两个特性是实现动态交互效果的核心。 首先,`transform`属性允许我们对HTML元素进行二维或三维的变换,如旋转、缩放、移动和平移。它...

    CSS3 transition鼠标hover按钮动画特效

    鼠标hover按钮动画是通过在鼠标悬停时改变元素的样式,然后利用CSS3的transition属性平滑地过渡到新样式。在本示例中,可能有15种不同的动画效果,包括颜色变化、大小变换、旋转、透明度调整等。 3. **使用:hover...

    CSS3 transition鼠标hover按钮动画特效源码.zip

    【CSS3 transition】是CSS(层叠样式表)的一个重要特性,它允许元素在不同状态之间平滑过渡,比如当鼠标悬停(hover)在按钮上时,可以创建出丰富的动画效果。在网页设计中,按钮是用户交互的重要组件,通过CSS3 ...

    css3 transition图文动画显示特效.zip

    【CSS3 Transition 图文动画显示特效】 在网页设计中,CSS3 Transition(过渡效果)是一种强大的工具,可以为用户交互添加动态视觉体验。本资源"css3 transition图文动画显示特效.zip"提供了一种创新的方式,当鼠标...

    纯css3 transition鼠标悬停图片文字动画显示

    在本文中,我们将深入探讨如何使用CSS3的`transition`属性来实现鼠标悬停时的图片文字动画效果。`transition`是CSS3中一个强大的工具,它允许元素在不同的状态之间平滑过渡,例如在鼠标悬停时改变颜色、大小或透明度...

    div CSS3动画带有的按钮_css3样式表属性动画按钮

    CSS3的动画功能主要由两个关键属性提供:`transition`和`animation`。`transition`用于平滑地改变一个或多个CSS属性,当这个属性值发生改变时,比如在鼠标悬停时改变按钮的颜色。下面是一个简单的例子: ```css ....

    CSS3中的Transition属性详解.docx

    CSS3的Transition属性是网页设计中用于创建平滑过渡效果的关键工具。它允许CSS属性值在特定时间内平滑地变化,创造出动态的动画效果。在鼠标点击、获得焦点、元素被点击或者任何属性改变时,Transition都可以触发...

    css3鼠标悬停动画

    通过利用CSS3的:hover伪类和各种动画属性,我们可以创建出丰富多彩的交互效果,使得用户在鼠标悬停在元素上时能够看到动态的视觉反馈。 一、`:hover` 伪类 `:hover` 是CSS中的一个选择器,用于定义当鼠标指针浮动在...

    CSS3 transition动画属性制作鼠标悬停放大图片倾斜效果

    本篇文章将深入讲解如何使用CSS3的transition属性来创建一个鼠标悬停时图片放大并倾斜的效果。 首先,我们要了解CSS3的`transition`属性。它主要包括四个子属性:`transition-property`、`transition-duration`、`...

    CSS3 transition属性单页模板鼠标悬停导航菜单文字动画

    在本项目“CSS3 transition属性单页模板鼠标悬停导航菜单文字动画”中,我们将探讨如何利用`transition`属性来制作动态的导航菜单,当鼠标悬停在菜单项上时,菜单的文字将呈现生动的动画效果。 首先,`transition`...

    CSS3边框动画

    **CSS3边框动画详解** 在网页设计中,动态效果能极大地提升用户体验,CSS3的引入使得这种动态效果的实现变得更加简单和高效。本篇将深入探讨CSS3边框动画,帮助你掌握这一强大的视觉呈现工具。 ### 一、边框动画...

    css3 transition按钮动画特效.zip

    本资源"css3 transition按钮动画特效.zip"专注于利用CSS3的transition属性为网页按钮创建丰富多彩的动画效果。Transition是CSS3中的一个关键特性,它允许元素在不同状态之间平滑过渡,比如在鼠标悬停、点击或其他...

Global site tag (gtag.js) - Google Analytics