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旋转.主要知识点如 ...
随机推荐
- K8S 1.16 [plugin flannel does not support config version
[plugin flannel does not support config version 导致 Unable to update cni config: no valid networks fo ...
- C# -- RSA加密与解密
1. RSA加密与解密 -- 使用公钥加密.私钥解密 public class RSATool { public string Encrypt(string strText, string st ...
- SpringBoot系列随笔 - BootJar的启动方式
前言 写完maven的加密插件后,尝试在boot启动时的类加载过程中编写解密代码时,发现了一个平常没有注意的地方. 那就是boot-jar的启动方式与我们平常编写的可执行jar是存在很大差别的. 所以 ...
- node-sass 埋坑记录
node-sass 埋坑记录 背景 原有项目.环境: node:v8.16.2 npm:v6.4.1 node-sass::v4.8.0 Angular-CLI:v6.x 本机没有安装 Visual ...
- iOS开发中全量日志的获取
我们在app中对崩溃.卡顿.内存问题进行监控.一旦监控到问题,我们就需要记录下来,但是,很多问题的定位仅靠问题发生的那一刹那记录的信息是不够的,我们需要记录app的全量日志来获取更多的信息. 一,使用 ...
- jq实现回车键事件
我们写系统的时候常常因为要点击显得很麻烦,习惯了回车键完成一些东西. 接下来就直接上代码吧.jq实现回车键事件 keyDowm: () => { $("body").keyd ...
- C# 让你解决方案乱七八糟的DLL放入指定文件夹
嗯,大家的解决方案可能会有许多dll,这样不美观,而且也麻烦. 很多小白都不知道如何将这些dll放到如自己程序的bin文件夹下. 本渣今天来试着将dll复制到指定的文件夹下~ 比如我之前做的一个Win ...
- Windows下使用virtualenv创建虚拟环境
操作系统 : windowns10_x64Python版本:3.6.8virtualenv版本:16.7.7virtualenvwrapper版本:1.2.5 方式一:直接使用virtualenv 1 ...
- node 升级版本
1.安装 更新node.js版本 命令 [root@node ~]# npm install -g n /home/meisapp/node/node-v6.10.0-linux-x64/bin/n ...
- Spring Boot 2 快速教程：WebFlux 集成 Thymeleaf（五）
号外:为读者持续整理了几份最新教程,覆盖了 Spring Boot.Spring Cloud.微服务架构等PDF.获取方式:关注右侧公众号"泥瓦匠BYSocket",来领取吧! 摘 ...