CSS3实现过渡效果 (transition)
来源:互联网 发布:java策略模式接口意义 编辑:程序博客网 时间:2024/05/16 17:49
CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的
动画。
transition的语法:transition: transition-property || transition-duration ||
transition-timing-funciton || transition-delay ;
其参数的取值说明如下:
<transition-property>:定义用于过渡的属性;
<transition-duration>:定义过渡过程需要的时间(必选,否则不会产生过渡效果)
<transition-timing-function>:定义过渡的方式;
<transition-delay>:定义开始过渡的延迟时间;
使用transition属性定义一组过渡效果,需要以上四个参数。transition属性可以同时定义
两组或两组以上的过渡效果,组与组之间用逗号分隔。
基于webkit内核的私有属性是:-webkit-transition;
基于gecko内核的私有属性是:-moz-transition;
基于prestot内核的私有属性是:-o-transition;
如下例1:过渡效果
图1:起始效果
图2:结束效果
图1所对应的初始代码如下:
代码1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20171214 CSS过渡属性</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: all 1000ms linear 500ms;
-o-transition: all 1000ms linear 500ms;/*兼容parsto内核*/
-moz-transition: all 1000ms linear 500ms;/*兼容gecko内核*/
-webkit-transition: all 1000ms linear 500ms;/*兼容webkit内核*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
当给div增加代码2之后,即可实现图2的效果:
代码2:
div:hover{
transform: rotate(60deg);
background-color: red;
}
即是div元素实现颜色的变化和以图形的原点为原心顺时针旋转60度。
1.指定过渡的属性 ( transition-property属性 )
transition-property的语法:transition-property:none | all | <property> ;
其取值说明如下:
none:表示没有任何CSS属性有过渡效果;
all:为默认值,表示所有的CSS属性都有过渡效果;
<property>:指定一个用逗号分隔的多个属性,针对指定的这些属性有过渡效果。
若将代码1做如下更改,更改之后的代码为代码3:
代码3:
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: background-color 1000ms linear 500ms;
-o-transition: background-color 1000ms linear 500ms;/*兼容parsto内核*/
-moz-transition: background-color 1000ms linear 500ms;/*兼容gecko内核*/
-webkit-transition: background-color 1000ms linear 500ms;/*兼容webkit内核*/
}
此时只有背景色有过渡效果,循序渐进的变化,而其他的效果则没有过渡;
2.指定过渡的时间(transition-duration)
transition-duration属性:用于定义过渡过程所需要的时间。
transition-duration语法:transition-duration:<time>;
其取值说明:
<time>指定一个用逗号分隔的多个时间值,单位是秒(s)或毫秒(ms)。默认值是0,即是看不到过渡效果。
可对代码1进行如下更改为代码4:
代码4:
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: background-color3000ms linear 500ms;
-o-transition: background-color 3000ms linear 500ms;/*兼容parsto内核*/
-moz-transition: background-color 3000ms linear 500ms;/*兼容gecko内核*/
-webkit-transition: background-color 3000ms linear 500ms; /*兼容webkit内核*/
}
此时过渡时间将会由1s变化为3s。
3.指定过渡延迟时间(transition-delay):
transition-delay:用于定义过渡的延迟时间;
transition-delay语法:transition-delay:<time>;
其取值说明如下:<time>的取值可以为秒(s)或毫秒(ms)。默认值为0,即是没有时间延迟,立即开始过渡效果。
可将代码1更改为如下的代码5:
代码5:
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: background-color3000ms linear 2000ms;
-o-transition: background-color 3000ms linear 2000ms;/*兼容parsto内核*/
-moz-transition: background-color 3000ms linear 2000ms;/*兼容gecko内核*/
-webkit-transition: background-color 3000ms linear 2000ms;/*兼容webkit内核*/
}
此时的过渡效果将由500ms的延迟更改为延迟到200ms;
4.指定过渡方式(transition-timing-function)
transition-timing-function属性用于定义过渡的速度曲线,即是过渡方式。transition-timing-function语法:transition-timing-function: ease | linear | ease-in | ease-out
| ease-in-out | cubiz-bezier(n,n,n,n);
其取值的说明如下:
linear: 表示匀速过渡;
ease: 默认值,表示过渡的速度先慢,再快,最后非常慢;
ease-in: 表示过渡的速度先慢,后越来越快,直至结束;
ease-out: 表示过渡的速度先快,后越来越慢,直至结束;
ease-in-out: 表示过渡的速度在开始和结束时都很慢;
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果,其中的四个参数为从0到1的数字。
- CSS3实现过渡效果 (transition)
- css3的transition 过渡效果
- CSS3 过渡效果transition
- CSS3 如何让height:auto实现transition过渡效果
- CSS3 transition 属性过渡效果 详解
- transition属性——css3过渡效果
- 用css3的transition实现过渡动画
- CSS3 过渡之transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- CSS3----过渡transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- css3 transition(过渡)
- css3的过渡transition
- css3过渡动画transition
- CSS3的过渡 transition
- CSS3过渡transition
- springMVC的restful风格
- .NET 使用 ODP.NET 组件访问Oracle提示 外部组件发生异常 错误的解决办法
- go install 命令
- Android 触摸事件传递机制
- 直播系统源码卢本伟你真牛逼啊,俺媳妇都知道你了!
- CSS3实现过渡效果 (transition)
- 解读 Keras 在 ImageNet 中的应用:详解 5 种主要的图像识别模型
- 决策树
- 安卓pulltorefresh刷新
- 第十二周项目三
- 【Python进入山东小学教材】吴恩达:孩子会识字后立马教她Python!
- C语言__结构体
- 寄存器讲解--汇编(32位处理器)
- 有时更贵的ADC是最划算的