CSS学习笔记之CSS3新特性
这篇文章,我们将会介绍在 CSS3 中加入的 过渡 与 动画 效果
1、过渡
通过 CSS3,我们可以在不使用 Flash 或 JavaScript 的情况下,使得元素在样式转换时添加过渡效果
(1)属性名称
可以使用 transition-property 规定应用过渡效果的属性名称,当指定的属性改变时,过渡效果开始作用
可选值如下:
none
:表示没有属性获得过渡效果,默认值all
:表示所有属性获得过渡效果名称列表
:指定获得过渡效果的属性,列表以逗号分隔
(2)作用时间
可以使用 transition-duration 规定过渡效果的作用时间,其接受一个时间值,默认为 0
因此在使用过渡效果时,必须要设置 transition-duration 属性,否则将无法看到过渡效果
(3)作用速度
可以使用 transition-timing-function 规定过渡效果的速度曲线,可选值如下:
linear
:以相同的速度从开始至结束ease
:默认值,以慢速开始,然后变快,以慢速结束ease-in
:以慢速开始ease-out
:以慢速结束ease-in-out
:以慢速开始,以慢速结束
(4)延迟时间
可以使用 transition-delay 延迟过渡效果的开始时间,这个属性同样接受一个时间值,默认为 0
(5)简写属性
为了方便,可以仅在 transition 属性中设置所有有关过渡效果的属性
transition: property duration timing-function delay;
一个简单的例子如下:
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: LightSkyBlue;
}
div:hover {
width: 300px;
}
.withTransition {
width: 100px;
height: 100px;
background: LightSkyBlue;
transition: width 1s ease;
-o-transition: width 1s ease; /* Opera */
-moz-transition: width 1s ease; /* Firefox */
-webkit-transition: width 1s ease; /* Safari and Chrome */
}
/* 当鼠标停留在 div 元素上时,宽度将会变化,从而产生过渡效果 */
</style>
</head>
<body>
<div></div>
<br/>
<div class="withTransition"></div>
</body>
</html>
2、动画
通过 CSS3,我们可以在不使用 Flash 或 JavaScript 的情况下,为网页创建动画
(1)动画名称
可以使用 animation-name 属性规定动画名称,它的可选值有两个:
none
:无动画,一般用于覆盖来自级联的动画效果名称
:定义动画名称
(2)播放时间
可以使用 animation-duration 规定动画效果的作用时间,其接受一个时间值,默认为 0
因此在使用动画时,必须要设置 animation-duration属性,否则将无法看到动画效果
(3)播放速率
可以使用 animation-timing-function 规定动画效果的速度曲线,可选值如下:
linear
:以相同的速度从开始至结束ease
:默认值,以慢速开始,然后变快,以慢速结束ease-in
:以慢速开始ease-out
:以慢速结束ease-in-out
:以慢速开始,以慢速结束
(4)延迟时间
可以使用 animation-delay 延迟动画效果的开始时间,这个属性同样接受一个时间值,默认为 0
(5)播放次数
可以使用 animation-iteration-count 属性规定动画的播放次数,可选值如下:
数字
:表示播放次数,默认为 1infinite
:表示无限播放
(6)播放方向
可以使用 animation-direction 属性规定动画的播放方向,可选值如下:
normal
:默认值,正常播放alternate
:轮流反向播放
(7)播放状态
可以使用 animation-play-state 属性规定动画的播放状态,可选值如下:
running
:默认值,正在播放paused
:暂停
(8)间隙可见性
可以使用 animation-fill-mode 属性规定动画在播放之前或之后效果的可见性,可选值如下:
none
:不改变默认行为forwards
:在动画完成之后,保持最后的属性值(在最后一个关键帧中定义)backwards
:在动画显示之前,应用开始的属性值(在第一个关键帧中定义)both
:在动画显示之前应用开始的属性值,在动画完成之后保持最后的属性值
(9)简写属性
为了方便,可以仅在 animation 属性中设置所有有关动画的属性
animation: name duration timing-function delay iteration-count direction;
(10)@keyframes 规则
动画的原理其实就是将一套 CSS 样式逐渐变换成另一套 CSS 样式
我们可以通过 keyframes 规则,通过百分比定义关键帧的 CSS 样式,从而创建出一个连续播放的动画
另外除了使用百分比,也能使用关键字定义关键帧,关键字分别是 from
(对应 0%
)和 to
(对应 100%
)
一个简单的例子如下:
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: LightSkyBlue;
position: relative;
animation: test 2s linear infinite alternate;
-webkit-animation: test 2s linear infinite alternate; /*Safari and Chrome*/
}
@keyframes test {
from { left: 0px; }
to { left: 200px; }
}
@-webkit-keyframes test { /*Safari and Chrome*/
from { left:0px; }
to { left:200px; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
【 阅读更多 CSS 系列文章,请看 CSS学习笔记 】
CSS学习笔记之CSS3新特性的更多相关文章
- C++ 学习笔记(一些新特性总结3)
C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...
- HTML学习笔记之HTML5新特性
目录 1.拖放 2.画布 3.可伸缩矢量图形 4.地理定位 5.Web 存储 6.应用缓存 7.Web Worker 1.拖放 拖放是一种常见的特性,用于抓取对象以后拖到另一个位置,它是 HTML5 ...
- Groovy学习笔记-Java 5新特性支持
1.枚举enum enum CoffeeSize{ SHORT, SMALL, MEDIUM, LARGE, MUG } def orderCoffee(size){ print "Coff ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- 初探Java中的异常处理
Java中的异常有以下几种: 1) Error:Java运行时的内部错误. 2) Exception:程序中应该捕获的异常. RuntimeException:因为编程产生的错误 ...
- [面试题]java中final finally finalized 的差别是什么?
final 是修饰符,能够用于修饰变量.方法和类.修饰变量时.代表变量不能够改动,也就是常量了.常量须要在定义时赋值或通过构造函数赋值,两者仅仅能选其一:修饰方法时,代表方法仅仅能调用,不能被 ove ...
- 多线程编程和Java网络编程
1. 线程概述 多任务处理有两种类型:基于进程.基于线程(进程是指一种“自包容”的运行程序,有自己的地址空间; 线程是进程内部单一的一个顺序控制流) 基于进程的特点是允许计算机同时运行两个或更多的程序 ...
- CentOS/ubuntu iscsi initior target
http://docs.oracle.com/cd/E26926_01/html/E25884/fpjwy.html iscsiadm: initiator reported error (24 - ...
- java 中接口的概念
接口接口在java中是一个抽象的类型,是抽象方法的集合,接口通常使用interface来声明,一个类通过继承接口的方式从而继承接口的抽象方法.接口并不是类,编写接口的方式和类的很相似,但是他们属于不同 ...
- centos7安装python3.7和ipython
一.centos7为刚安装的 1)配置yum源和epel源 采用国内源 查看yum的配置文件 (里面的镜像网址)是否ping的通 全部更改成 国内的 yum .epel源 在图中位置 下载相应的 re ...
- WinSocket简单聊天程序客户端
#pragma comment(lib,"Ws2_32.lib") #include <stdio.h> #include <Winsock2.h> SOC ...
- Java NIO Buffer说明
Buffer 有3个重要的参数:位置(position).容量(capactiy).上限(limit) 位置(position): 写:当前缓冲区的位置,将从position的下一个位置写数据. 读: ...
- BZOJ 4810 莫队+bitset
思路: 看完这道题根本没有思路啊.... 然后我就膜拜了一波题解... 这神tm乱搞思路 维护两个bitset 第一个bitset代表当前区间哪些数出现过 第二个bitset是 maxp-p出现过 差 ...
- python 线程池和锁
一.死锁现象与递归锁 锁:Lock线程安全,多线程操作时,内部会让所有线程排队处理.如:list/dict/Queue 线程不安全 + 人 => 排队处理. import thre ...