过渡transitioin
一,什么是过渡(transition)?
1,transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。
2,可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。
二,常用属性;
1,transition 属性主要包含四个属性值:
1),用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果;
2),transition-duration -- 定义过渡效果花费的时间,默认是 0;
3),transition-timing-function -- 允许根据时间的推进去改变属性值的变换速率,
transition-timing-function有6个可能值:
a、ease:(逐渐变慢)默认值
b、linear:(匀速),linear
c、ease-in:(加速)
d、ease-out:(减速),
e、ease-in-out:(加速然后减速)
f、cubic-bezier:(该值允许你去自定义一个时间曲线)特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
4),transition-delay -- 用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,默认是 0。
5),transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。
如:transition: <property> <duration> <animation type> <delay>
过渡transitioin的更多相关文章
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- 用js触发CSS3-transition过渡动画
用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- CSS3之过渡及2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- CSS基础篇之背景、过渡动画
background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...
- CSS学习笔记2-2d变换和过渡属性
前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...
随机推荐
- Request.UrlReferrer
1:Request.UrlReferrer可以获取客户端上次请求的url,这样就可以实现类似“上一页”的功能等 2:刷新当前页面,不会改变Request.UrlReferrer的值 3:如果有A,B两 ...
- MSER算法介绍
MSER代码编译: matlabroot %如果是VS2010则解压VS2010MEX支持文件到MATLAB根目录 unzip('E:\Software\develop Tools\VS2010MEX ...
- myeclipse构建webservice项目
新建server端 1 创建Web Service Project项目 2.项目名称:HelloWorldServer 3.创建接口类 4.发布 选择项目名称,选择从Java类中构建web servi ...
- MySQL服务 - MySQL 5.5编译安装
cmake介绍: MySQL 5.5之后,所有的编译操作都通过cmake进行,使用cmake最大的好处是其独立于源码(out-of-source)的编译功能,即编译工作可以在另一个指定的目录中而非源码 ...
- 关于Windows2008服务器设置MIME后仍然无法播放MP4的解决方法
最近遇到了一个非常邪门的故障,重新安装了Windows2008服务器后 Mp4无法正常播放: 整个互联网中关于设置MP4的方法基本都是教你如何在IIS中设置MIME 本文讨论的不是如何教你设置MIME ...
- 说说Web.Config与App.Config
说到web.config和app.config大家都很熟悉,我们都叫他们配置文件,平时用的多,注意的少.两个有啥区别呢,很简单,一句话:如果是web程序,如webform项目类型和mvc项目类型就是w ...
- CentOS下安装LAMP环境
1.安装Apache yum -y install httpd # 开机自启动 chkconfig httpd on # 启动httpd 服务 service httpd start #安装apach ...
- Linux下搭建SVN服务器及自动更新项目文件到web目录(www)的方法
首先搭建SVN服务器 1,安装SVN服务端 直接用apt-get或yum安装subversion即可(当然也可以自己去官方下载安装) sudo apt-get install subversion ...
- SQLServer 列出每个表的列和属性
USE DBProjectSY GO SELECT OBJECT_SCHEMA_NAME(T.[object_id], DB_ID()) AS [架构名] , T.[name] AS [表名] , A ...
- 慕课网-Java入门第一季-7-5 Java 中带参无返回值方法的使用
public class HelloWorld { public static void main(String[] args) { // 创建对象,对象名为hello HelloWorld hell ...