CSS3新特性—animate动画
1、animate介绍
1. @keyframes 自定义动画名称 {
from {
}
to {
}
}
2. 通过动画名称调用动画集
animation-name： 动画集名称。
3. 属性介绍：
/* 1. 通过动画集名称调用动画 */
animation-name: box_move;
/* 2.设置动画执行时间 */
animation-duration: 1s;
/* 3. 动画默认执行次数是1次, infinite: 无限次 */
animation-iteration-count: infinite;
/* 4. 设置动画的速度类型: ease ; */
animation-timing-function: linear;
/* 5. 设置延时执行时间 */
animation-delay: 2s;
/* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/
animation-direction: alternate;
/* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */
animation-fill-mode: forwards;
/* 8。 动画播放状态设置： running | paused暂停 */
animation-play-state: paused;
4. animation复合写法：
例如： animation: box_move 1s linear 2s alternate forwards;
注意：
1. 一个元素可以同时调用多个动画集，使用逗号隔开。
例如：
animation: box_move 1s,
one 1s linear 1s,
three 2s ease 5s alternate;
2. 可以将一个完整的动画分割成若干个阶段执行
@keyframes one {
0% {}
10% {}
20% {}
...
100%{}
}
百分比是相对整个动画执行时间而设置的。
2、案例
案例效果：盒子先水平向右移动100px；接下来向下移动100px，然后向左移动100px，最后向上移动100px又回到原点，其中每次改变方向都要变化背景颜色，循环往复执行
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.box {
width: 30px;
height: 30px;
background-color: blue;
animation: move 8s linear infinite forwards;
}
@keyframes move {
from {
}
25% {
transform: translateX(100px);
background-color: red;
}
50% {
transform: translateX(100px) translateY(100px);
background-color: green;
}
75% {
transform: translateX(0px) translateY(100px);
background-color: yellow;
}
to {
transform: translateY(0px);
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3新特性—animate动画的更多相关文章
- css3 新特性（动画）
1. 制作动画 先定义动画,再使用(调用)动画 使用 keyframes(关键帧)定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{ width:100px; } 100%{ wi ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
随机推荐
- List<Object> 查询解析优化
2018年3月16日 大型仪器设备分类查出后,需要展示个分类下总共有多少台设备.因为分类总共分三层,加起来数据700+.以后该系统上线设备可能达到2000+,这样统计每个分类下的设备可能会拖垮服务器. ...
- HDU - 3724 Encoded Barcodes （字典树）
题意:给定n个字符串和m个经过处理得到的字符串,问对于m个字符串中的每个字符串,n个字符串中以该字符串为前缀的个数.分析:1.误差在[0.95x, 1.05x],因此求8个数的平均数,大于平均数为1, ...
- UVA - 1152 4 Values whose Sum is 0（中途相遇法）
题意:从四个集合各选一个数,使和等于0,问有多少种选法. 分析:求出来所有ai + bi,在里面找所有等于ci + di的个数. #pragma comment(linker, "/STAC ...
- --转载 详细介绍java中的数据结构
http://developer.51cto.com/art/201107/273003.htm 也许你已经熟练使用了java.util包里面的各种数据结构,但是我还是要说一说java版数据结构与算法 ...
- 安装部署及升级到Exchange Server 2010
本文档详细的描述了,如何在Windows Server 2008 R2的环境下安装Exchange Server 2010,包括的内容有: 先检查组织环境: 1.请确保林的功能级别至少为 Wind ...
- 安装npm install时，长时间停留在fetchMetadata: sill 解决方法——换npm的源
安装npm install时,长时间停留在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch处, ...
- Arduino nano的bootloader文件烧录
1.买了了nano还没用就用 avrisp烧录器给烧了其他程序,仅仅是的avr单片机了:2.将他恢复成Arduino nano吧. 在Arduino软件安装目录中的hardware\arduino中. ...
- tensorflow学习笔记--dataset使用，创建自己的数据集
数据读入需求 我们在训练模型参数时想要从训练数据集中一次取出一小批数据(比如50条.100条)做梯度下降,不断地分批取出数据直到损失函数基本不再减小并且在训练集上的正确率足够高,取出的n条数据还要是预 ...
- Swift 闭包使用(循环引用...）
class networkTool: NSObject { //定义一个可选类型的闭包,用小括号()?括起闭包 var finishedCallBack2:((_ jsonData:String)-& ...
- 干货分享：学术Essay写作流程及写作技巧详解
Academic essay是指留学生作业中的一种,其范围非常广泛,可以是任何一种话题.而学术essay主要是指其中比较正式的.客观的话题,有明确的研究目的与研究对象.例如“Research on t ...