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旋转.主要知识点如 ...
随机推荐
- SAP 下钻功能大全
FORM ALV_USER_COMMAND USING R_UCOMM LIKE SY-UCOMM "作为reuse_alv_grid_display的事件i_callback_user_c ...
- MTDDL 美团分布式数据访问中间件（转）
MTDDL 美团分布式数据访问中间件(转) 原文地址:MTDDL--美团点评分布式数据访问层中间件 因原文文字和图显示有问题,故整理于此,仅供参考. 业界方案 组件 简介 Atlas Qihoo 36 ...
- 利用zabbix API 统计一段时间内监控项的均值和峰值
#coding:utf-8 #给定主机IP获取一段时间内cpu的均值和峰值并写入文件(txt,可以跑完后直接把后缀名改为csv以表格形式打开):需要指定IP文件 import requests imp ...
- netty解决粘包半包问题
前言:开发者用到TCP/IP交互时,偶尔会遇到粘包或者半包的数据,这种情况有时会对我们的程序造成严重的影响,netty框架为解决这种问题提供了若干框架 1. LineBasedFrameDecoder ...
- 八、VTK安装并运行一个例子
一.版本 win10 VS2019 VTK8.2.0 其实vtk的安装过程和itk的安装过程很是类似,如果你对itk的安装很是熟悉(也就是我的博客一里面的内容,那么自己就可以安装.) 如果不放心,可以 ...
- 【使用篇二】SpringBoot使用Druid作为数据源（19）
Druid是一个关系型数据库连接池,它是阿里巴巴的一个开源项目.Druid支持所有JDBC兼容数据库,包括了Oracle.MySQL.PostgreSQL.SQL Server.H2等.Druid在监 ...
- [译]Vulkan教程(22)创建顶点buffer
[译]Vulkan教程(22)创建顶点buffer Vertex buffer creation 创建顶点buffer Introduction 入门 Buffers in Vulkan are re ...
- css多余文本使用....代替
1. 只显示单行文本,多余文本使用...代替 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 2. 显示多行文本,多余文 ...
- python __iter__和__getitem__区别
__getitem__ 单独实现这个魔法函数,可以让这个类成为一个可迭代的对象,并且可以通过使用下标获取类中元素值下标的元素 class Library(object): def __init__(s ...
- 利用百度文字识别API识别图像中的文字
本文将会介绍如何使用百度AI开放平台中的文字识别服务来识别图片中的文字.百度AI开放平台的访问网址为:http://ai.baidu.com/ ,为了能够使用该平台提供的AI服务,你需要事先注册一 ...