css3中transition属性的详细介绍

 时间:2024-10-13 00:17:49

1、定义:transition用于在一定的时间内平滑的过度,这种效果可以在鼠标单击,获取焦点,被点击或对元素任何改变中触发,并圆滑的以动画效果改变CSS属性的属性值。从定义可以知道transition是一个用于动画过度的属性,然而transiton属性只不过是一个简写属性,用于设置四个过度属性,这四个过度属性分别是:transition-property (执行变换的属性 )transition-duration (变换延续时间)transition-timing-function (延续时间内,变换速率的变化)transition-delay (变换延迟时间)下面来分别介绍一下各个属性transition-property 即用来指定当元素其中一个属性改变是执行transition效果值:none(没有属性改变),all(所有属性都改变)或指定某一元素(比如color,background等属性)。transition-duration 是动画执行的时间,单位(s)比如"0.1s"也可以写成".1s",它可以作用于任何元素,包括before和after伪元素。transition-timing-function 动画的执行方式值:ease(逐渐慢下来),linear(匀速),ease-in(由慢到快),ease-out(由快到慢),ease-in-out(先慢到快再到慢),cubic-bezier(该值允许你去自定义一个时间曲线)。transition-delay 动画延时时间基本用法与duration相同。

2、语法:transition: <transition> [, <transition>]*<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>这种写法是比较简单的写法,我们也可以同时写多个Transition效果,每个效果按照固定属性的顺序书写如图。

css3中transition属性的详细介绍
  • 图解SQL Server 2008数据库系统的设置
  • vb.net 2012[1]button 控件
  • sql server 2008如何创建登录名连接新建数据库
  • UltraEdit如何快速打开文件
  • 用JS怎么实现点击按钮改变指定div的id
  • 热门搜索
    深圳到香港旅游 缙云旅游网 厦门旅游婚纱摄影 悠游旅游网 红河旅游景点大全 旅游百事通旅行社官网 温州短途旅游 贵州旅游攻略景点必去 济南周边旅游 安徽旅游景点介绍