CSS新特性之动画
动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常常用来实现复杂的动画效果。相比较过度，动画可以实现更多变化，更多控制，连续自动(不需要鼠标经过和鼠标离开来控制)播放等效果。
5.1动画的基本使用
- 先定义动画
- 再使用（调用）动画
5.1.1用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
动画序列
- 0%是动画的开始，100%是动画的结尾。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式，就能创建以当前样式逐渐转化为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或者用关键词from和to,等同于0%和100%
5.1.2元素使用动画
/*调用动画*/
animation-name: 动画名称；
/*持续时间*/
animation-duration: 持续时间；
举例：
<body>
<div></div>
</body>
<style type="text/css">
/*1. 定义动画*/
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/*2. 调用动画*/
animation-name: move;
/*3. 持续时间*/
animation-duration: 2s;
}
</style>
5.2动画序列
动画序列
- 0%是动画的开始，100%是动画的结尾。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式，就能创建以当前样式逐渐转化为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或者用关键词from和to,等同于0%和100%
<body>
<div></div>
</body>
<style type="text/css">
/*动画序列*/
/*1.可以做多个状态的变化keyframe关键帧*/
/*2. 里面的百分比要是整数*/
/*3. 里面的百分比是总时间(这个案例是10s)的划分 25% * 10 = 2.5s*/
@keyframes move {
0% {
transform: translate(0,0);//这里可以空着，甚至不写
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
5.3动画属性
5.3.1动画的常用属性
<body>
<div></div>
</body>
<style type="text/css">
@keyframes move {
from {
transform: translate(0,0);//这里可以空着，甚至不写
}
50% {
transform: translate(1000px,0);
}
to {
transform: translate(1000px,500px);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/*动画名称*/
animation-name: move;
/*持续时间*/
animation-duration: 5s;
/*运动曲线*/
animation-timing-function: ease;
/*何时开始*/
animation-delay: 1s;
/*重复次数*/
animation-iteration-count: 2;
/*是否反方向*/
animation-direction: normal;
/*动画结束后的状态 默认是backwards回到起始状态，我们可以让它停留在结束状态forwards*/
animation-fill-mode: forwards;
}
div:hover {
/*鼠标经过div 让这个div停止动画，鼠标离开就继续动画*/
animation-play-state: paused;
}
</style>
5.3.2 速度曲线细节
对于steps()举例
<body>
<div></div>
</body>
<style type="text/css">
div {
width: 0;
height: 30px;
background-color: pink;
animation: w 4s steps(10) forwards;/*steps(10)一步一步地走，走10步到达200px*/
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
利用steps()实现打字机效果
<body>
<div>我可以实现打字机效果</div>
</body>
<style type="text/css">
div {
overflow: hidden;
font-size: 20px;/*字号是按照字符的高度和宽度来规定的，一个汉字字符在显示器上他的高度是有几行点来表示就是几号字，20号字就是从上到下20*20个点来表示*/
width: 0;
height: 30px;
background-color: pink;
white-space: nowrap;/*让文字强制一行内显示*/
animation: w 4s steps(10) forwards;/*steps(10)一步一步地走，走10步到达200px*/
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;/*一共10个字，每个字20px,这10个子一共宽度为200px*/
}
}
</style>
steps()强化练习案例：奔跑的熊
<body>
<div></div>
</body>
<style type="text/css">
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/*元素可以添加多个动画，用逗号隔开*/
animation: bear 3s steps(8) infinite, move 1s;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
5.3.3 属性简写：
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
eg
animation: myfirst 5s linear 2s infinite alternative
- 前两个属性-name和-duration一定要写
- 简写属性里面不包括animation-play-state
- 暂停动画：animation-play-state: paused;经常和鼠标经过等其他配合使用。
- 想要动画走回来，而不是直接跳回来：animation-direction:alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode:forwards
<body>
<div></div>
</body>
<style type="text/css">
@keyframes move {
from {
transform: translate(0,0);//这里可以空着，甚至不写
}
50% {
transform: translate(1000px,0);
}
to {
transform: translate(1000px,500px);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/*简写*/
animation: move 5s linear 2s infinite alternate forwards;
}
div:hover {
/*鼠标经过div 让这个div停止动画，鼠标离开就继续动画*/
animation-play-state: paused;
}
</style>
5.4热点图案例 波纹效果
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
<style type="text/css">
.map {
position: relative;
width: 747px;
height: 616px;
background: url(media/map.jpg) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 70px;
right: 100px;
color: #fff;
}
.tb {
top: 170px;/*不可以用left和bottom，为的就是将上面.city中的值给铺盖掉，而且如果同时有top和bottom,优先满足top*/
right: 200px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {/*以pulse开头的div盒子 权重： 10+1+10=21*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
.city div.pulse2 {/*10+1+10=21*/
animation-delay: 0.3s;
}
.city div.pulse3 {/*10+1+10=21*/
animation-delay: 0.6s;
}
@keyframes pulse {/*这里的放大是通过改变width和height，而没有用scale,这是因为用scale放大时会把阴影也一起放大了，结果并不好看*/
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;/*透明的不变*/
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
CSS新特性之动画的更多相关文章
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- css3 新特性（动画）
1. 制作动画 先定义动画,再使用(调用)动画 使用 keyframes(关键帧)定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{ width:100px; } 100%{ wi ...
- CSS新特性contain，控制页面的重绘与重排
在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 【译】2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...
- css新特性 box-flex/flex 弹性盒状模型
新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...
- CSS新特性之3D转换
1. 三维坐标系 x轴:水平向右(右边是正,左边是负) y轴:垂直向下(向下是正,向上是负) z轴:垂直屏幕(向外是正,向里是负) 2. 3D转换 3D转换中最常用的是3D位移和3D旋转.主要知识点如 ...
随机推荐
- .NET面试题解析(9)-SQL语言基础及数据库基本原理
见面试题 1. 索引的作用?她的优点缺点是什么? 2. 介绍存储过程基本概念和 她的优缺点? 3. 使用索引有哪些需要注意的地方? 4. 索引碎片是如何产生的?有什么危害?又该如何处理? 5. 锁的目 ...
- 再看Java之温故知新（体系篇）
一 数据类型 1.1 8种基本数据类型 1.2 引用数据类型 1.3 java内存机制 1.3.1 寄存器 1.3.2 栈 1.3.3 堆 1.3.4. 静态区/方法区 1.3.5. 运行时常量池(R ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- java根据value获取Map对象的key
Map<String, String> map= new HashMap<String,String>(); for(Map.Entry<String, String&g ...
- MATLAB实例：散点密度图
MATLAB实例:散点密度图 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ MATLAB绘制用颜色表示数据密度的散点图 数据来源:MATLAB中“fit ...
- Java之IO初识（字节流和字符流）
IO概述 生活中,你肯定经历过这样的场景.当你编辑一个文本文件,忘记了 ctrl+s ,可能文件就白白编辑了.当你电脑上插入一个U盘,可以把一个视频,拷贝到你的电脑硬盘里.那么数据都是在哪些设备上的呢 ...
- java之数据结构
数据结构有什么用? 现实世界的存储,我们使用的工具和建模.每种数据结构有自己的优点和缺点,想想如果Google的数据用的是数组的存储,我们还能方便地查询到所需要的数据吗?而算法,在这么多的数据中如何做 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性2
5 height和width属性 height和width属性规定用于image类型和input标签的图像高度和宽度.图像通常会同时指定高度和宽度属性.如果图像设置高度和宽度,图像所需的空间在加载页 ...
- 禧云Redis跨机房双向同步实践
编者荐语: 2019年4月16日跨机房Redis同步中间件(Rotter)上线,团餐率先商用: 以下文章来源于云纵达摩院 ,作者杨海波 禧云信息/研发中心/杨海波 20191115 关键词:Rot ...