CSS3过渡,不再为JS动画而犯愁
HTML5学堂:在页面开发中经常会借助JS来书写大量的特效,以获得较好的页面感官效果。但是真正到了使用JS来操作的时候,往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响,我们今天就来尝试下不借助任何JS,转而使用CSS3过渡来书写出更好的动画效果。
本文主要内容
一、Transition是什么
二、Transition的语法
三、Transition的属性值
四、Transition的使用
五、总结
一、Transition是什么
W3C标准中对CSS3的transition是这样描述的:“CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
在实际的开发中,经常会遇到手机上的JS动画卡顿现象,所以需要借用其他办法来替代使用,而CSS3的过渡就可以很好的解决这个问题,一起来看吧~~~
二、Transition的语法
下面同样从其语法和属性值开始一步一步来学习transition的具体使用。
- transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
transition主要包含四个属性值:
1、执行变换的属性:transition-property;
2、变换延续的时间:transition-duration;
3、在延续时间段,变换的速率变化:transition-timing-function;
4、变换的延迟时间:transition-delay。
下面继续来看看这四个属性值的具体使用吧~
三、Transition的属性值
1、transition-property
语法:transition-property: none | all | indent;
transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:
- none(没有属性改变);
- all(所有属性改变)这个也是其默认值;
- indent(元素属性名)。
当其值为none时,transition马上停止执行;当指定为all时,则元素产生任何属性值变化时都将执行transition效果;ident是可以指定元素的某一个CSS属性值。
常规的元素宽高、颜色等CSS属性变化都可以触发transition效果。但是需要提醒一点,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。
2、transition-duration
语法:transition-duration: time;
transition-duration是用来指定元素转换过程的持续时间。
取值:time为数值,单位为s(秒)或者ms(毫秒)。其默认值是0,也就是变换时是即时的。
可以作用于所有元素,包括:before和:after等伪元素。
3、transition-timing-function
语法:transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
transition-timing-function的值允许根据时间的推进去改变属性值的变换速率,有如下几个可能的取值:
- ease:逐渐变慢(默认值);
- linear:匀速;
- ease-in:加速;
- ease-out:减速;
- ease-in-out:加速然后减速。
4、transition-delay
语法:transition-delay: time;
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后等待多少时间后才开始执行transition效果。
取值:time为数值,单位为s(秒)或者ms(毫秒)。默认大小是0,也就是变换立即执行,没有延迟。
其使用和transition-duration极其相似,可以作用于所有元素,包括:before和:after等伪元素。
5、书写方式
有时不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果,那么只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。
但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的值为transition-duration,第二个为transition-delay。具体书写方式如下:
- transition: background 5s ease 2s,
- width 3s ease-in 2s;
如果想给所有元素的属性执行transition效果,那么还可以利用all属性值来操作,此时它们共享同样的延续时间以及速率变换方式,如:
- transition: all 5s ease 0.3s;
综合上述,可以给transition一个速记法:transition: "property" "duration" "animation type" "delay";如下图所示:
四、Transition的使用
通过上面,大家对CSS3的Transition属性已经有了一定的概念,下面为了加强在这方面的使用,一起来看下面的DEMO。通过实践来巩固前面的理论知识,也通过实践来加强transition的记忆。
下面的案例主要是在一个div中放置了几个小块,分别是对应了transition-timing-function中的几种类型,然后在div的hover状态下,改变其部分属性,从而达到一种动画效果。
首先把相应的结构代码搞定~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3的过渡</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
</style>
</head>
<body>
<!-- 案例的结构 -->
<div class="wrap clearfix">
<div class="timings-demo">
<div class="demo-box ease">HTML5学堂-码匠</div>
<div class="demo-box ease-in">HTML5学堂-码匠</div>
<div class="demo-box ease-out">HTML5学堂-码匠</div>
<div class="demo-box ease-in-out">HTML5学堂-码匠</div>
<div class="demo-box linear">HTML5学堂-码匠</div>
</div>
</div>
</body>
</html>
接下来,给对应的模块加上相应的CSS样式,从而实现完整的一个过渡效果,如下:
.timings-demo {
width: 460px;
height: 400px;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
}
.demo-box {
width: 150px;
height: 50px;
margin-bottom: 30px;
background: #96c;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 15px;
box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
}
/*ease效果:*/
.ease {
background: #f36;
transition: all 5s ease 0.3s;
}
/*ease-in效果:*/
.ease-in {
background: #369;
transition: all 3s ease-in 0.5s;
}
/*ease-out效果:*/
.ease-out {
background: #636;
transition: all 5s ease-out 0s;
}
/*ease-in-out效果:*/
.ease-in-out {
background: #3e6;
transition: all 2s ease-in-out 2s;
}
/*linear效果:*/
.linear {
background: #999;
transition: all 6s linear 0s;
}
/*hover状态下demo-box产生属性变化*/
.timings-demo:hover .demo-box {
height: 30px;
margin: 20px 0 40px 280px;
border: 1px solid rgba(255,230,255,08);
background: #39f;
line-height: 30px;
transform: rotate(360deg) scale(1.2);
border-radius: 25px;
}
最后,其效果图如下:
五、总结
那么今天关于CSS3的Transition就简单的介绍到这里,需要掌握的就是CSS3中Transition的属性值,上文提到的 "property" "duration" "animation type" "delay"。
最后提醒一句,因为Transition是CSS3的属性,所以在书写的时候需要加上相应的内核前缀。
- 10-移动端开发教程-移动端事件
- 灰色理论预测模型
- tweet情感分析流程
- Selenium2+python自动化52-unittest执行顺序
- 基于TensorFlow实现自编码器(附源码)
- Selenium2+python自动化53-unittest批量执行(discover)
- HTML/CSS/JavaScript学习笔记【持续更新】
- Selenium2+python自动化54-unittest生成测试报告(HTMLTestRunner)
- Selenium2+python自动化55-unittest之装饰器(@classmethod)
- 每天一个Linux命令(4)——mkdir
- 每天一个Linux命令(3)——pwd
- 11-移动端开发教程-zepto.js入门教程
- 【OpenCV学习笔记之一】图像加载,修改及保存
- 【干货】一种直观的方法认识梯度下降
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 剑指offer(41-50)题解
- 剑指offer(19-24)题解
- mybatis缓存之整合第三方缓存工具ehcache
- 剑指offer(51-60)题解
- mybatis逆向工程
- ssm之spring+springmvc+mybatis整合初探
- mybatis插件开发小例子
- java之如何在eclipse中新建对象时自动补全
- mybatis文件映射之当输入的参数不只一个时
- mybatis插件开发初探
- 剑指offer(25-30)题解
- 如何实时迁移MySQL到TcaplusDB
- 如何利用Terraform工具编排管理TcaplusDB
- 如何实时迁移AWS DynamoDB到TcaplusDB
- 腾讯云TcaplusDB基础能力介绍