`
zhangyaochun
  • 浏览: 2620601 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

transition-duration

    博客分类:
  • css3
阅读更多

 

transition-duration :  <time> [,<time>]

-----------指定改变样式整个过程完成时间的秒数

 

  • time是对象过渡的持续时间,数值,单位是s 秒  比如: 0.1s 或者.1s
  • 多个值用逗号(,)进行分割
  • 脚本特性为transitionDuration
  • 默认是0 ,变化是即时的
 
浏览器支持


 
 
 
 
兼容写法:
 
Webkit(Chrome/Safari) -webkit-transform-duration 
Gecko(Firefox) -moz-transform-duration 
Presto(Opera) -o-transition-duration 
Trident(IE) transition-duration  

 

  • 大小: 86.1 KB
分享到:
评论

相关推荐

    transition-x,用于编排android转换的声明性kotlin dsl.zip

    这段代码定义了一个先淡入后滑动上到下的组合转换,其中fade和slideTopToBottom是内置的Transition类型,duration用于设置动画时长。 3. 应用转换:定义好转换后,可以通过TransitionManager应用到Activity或...

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

    在CSS3中,`transition`属性系列是一个重要的创新,它允许我们为元素的样式变化添加平滑的过渡效果,而`transition-duration`则是这个系列中的关键属性之一。 `transition-duration`属性用于指定元素在进行样式变化...

    第9章 CSS3高级应用-教学设计 (教案).pdf

    本章将重点讲解CSS3中的`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`四个属性。 1. **`transition-property`属性** - `transition-property`用于指定应用...

    第25章 CSS3过渡效果.pdf

    CSS3通过transition属性实现过渡效果,包含四个主要的子属性,分别是transition-property、transition-duration、transition-timing-function和transition-delay。 二、transition-property transition-property...

    transition.docx

    Transition主要由四个子属性组成,它们分别是`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。 1. **transition-property**: 这个属性定义了哪些CSS属性应该...

    CSS3中的Transition属性详解.docx

    `transition-duration`用于设定过渡效果持续的时间,单位通常是秒(s)或毫秒(ms)。例如,`transition-duration: 2s;`表示过渡效果将持续两秒钟。如果没有定义该属性,那么过渡效果将瞬间完成,即没有过渡。 3. ...

    css transition实例

    首先,CSS transition的核心属性包括`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。这些属性共同决定了元素从一种样式变换到另一种样式的细节。 1. `...

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

    它包括四个值:`transition-property`, `transition-duration`, `transition-timing-function`, 和 `transition-delay`。 1. **transition-property**:定义需要应用过渡效果的CSS属性。默认值为`all`,意味着所有...

    12 爱情魔方step03.rar

    transition-duration 持续时间,单位 s(秒) 毫秒 transition-timing-function 过渡使用的方法(函数) transition-delay 过渡transition 作用:将元素的某个属性从“一个值”,在指定的时间内过渡到“另...

    农产品动画制作-过渡.pptx

    为了简化代码,CSS3提供了一个复合属性`transition`,可以一次性设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。例如,`transition: background-color 2s ...

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

    `transition`属性是一个简写属性,用于设置四个相关的属性:`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。这四个属性共同定义了元素从一个样式变换到另一个...

    要修改的例子

    它包括四个子属性:`transition-property`(指定要过渡的CSS属性)、`transition-duration`(过渡所需的时间)、`transition-timing-function`(控制过渡的速度曲线)和`transition-delay`(过渡开始前的延迟时间)...

    css3 transition按钮动画特效.zip

    它可以设置四个值:transition-property、transition-duration、transition-timing-function和transition-delay。 - `transition-property`:指定将应用过渡效果的CSS属性。可以是单一属性,如`background-color`,...

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

    transition属性是一个复合属性,它结合了`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`四个子属性,允许你在一行代码中设置过渡效果。基本语法如下: ```...

    HTML5&CSS3网页制作:transitiontimingfunction属性,transitiondelay属性.pptx

    transition-duration: 2s; transition-timing-function: ease-in-out; } div:hover { border-radius: 105px; } ``` 在这个例子中,当鼠标悬停在div上时,边框半径会在2秒内以`ease-in-out`的方式变化,使得过渡...

    过渡教辅.pdf

    首先,`transition`是一个简写属性,它允许开发者在一个声明中设置四个与过渡相关的属性,包括`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。这极大地简化了...

    css3鼠标移入样式变化过渡效果

    这个属性包含四个可选值:`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`。它们分别定义了要应用过渡效果的CSS属性、过渡的持续时间、过渡的速度曲线以及延迟...

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

    transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and transition-delay。 语法 transition: property duration timing-function delay; 属性: ...

    CSS3新属性transition-property transform box-shadow实例学习

    `transition-duration`定义了过渡效果持续的时间,这里是`.5s`,即半秒。`transition-timing-function`决定了过渡的速度曲线,`ease-out`表示过渡开始时慢,结束时快。 接下来是`transform`属性,它允许我们对元素...

Global site tag (gtag.js) - Google Analytics