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旋转.主要知识点如 ...
随机推荐
- js 实现ReplaceAll 的方法
JS 字符串有replace() 方法.但这个方法只会对匹配到的第一个字串替换. 如下例: <HTML> <HEAD> <TITLE> New Document ...
- MySQL索引查询原理
什么是索引? “索引”是为了能够更快地查询数据.比如一本书的目录,就是这本书的内容的索引,读者可以通过在目录中快速查找自己想要的内容,然后根据页码去找到具体的章节. 数据库也是一样,如果查询语句使用到 ...
- [转]BEC Vantage
https://www.examenglish.com/BEC/BEC_Vantage.html https://www.cambridgeenglish.org/exams-and-tests/bu ...
- Docker运行dotnetcore
windows下安装docker 参考: https://www.jianshu.com/p/502b4ac536ef https://docs.docker.com/ ...
- ORA-27468: ""."" is locked by another process
You have a scheduler job that generated an error. When the error occurred, you attempted to disable ...
- [Go] golang定时器与redis结合
golang定时器与redis结合,每隔1秒ping一下,每隔20秒llen一下队列的长度 package main import ( "fmt" "time" ...
- [洛谷P1373][题解]小a和uim之大逃离
(别点我我不是题目) 这道题可以很容易看出是一道dp(因为是在dp关卡里找的) 稍微想一下就可以yy出一个不错的状态: f[i][j][k][0/1]代表走到了点(i,j).膜液量相差k(小a-uim ...
- [译]Vulkan教程(23)暂存buffer
[译]Vulkan教程(23)暂存buffer Staging buffer 暂存buffer Introduction 入门 The vertex buffer we have right now ...
- [译]Vulkan教程(10)交换链
[译]Vulkan教程(10)交换链 Vulkan does not have the concept of a "default framebuffer", hence it r ...
- 最强Linux shell工具Oh My Zsh 指南
引言 笔者已经使用zsh一年多了,发现这个东东的功能太强大了.接下来,给大家推荐一下. 以下是oh-my-zsh部分功能 命令验证 在所有正在运行的shell中共享命令历史记录 拼写纠正 主题提示(A ...