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 ...
随机推荐
- 029、Java中的四则运算
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Spark Shuffle 过程
本文参考:http://www.cnblogs.com/cenyuhai/p/3826227.html 在数据流动的整个过程中,最复杂最影响性能的环节,就是 Shuffle 过程,本文将参考大神的博客 ...
- 安卓平分位置layout_weight学习记录
weight (权重) 使用把layout_width写成0 weight 为平分剩余父容器位置 两个标签平分 <?xml version="1.0" encoding ...
- Redis 详解 (二) redis的配置文件介绍
目录 1.开头说明 2.INCLUDES 3.MODULES 4.NETWORK 5.GENERAL 6.SNAPSHOTTING 7.REPLICATION 8.SECURITY 9.CLIENTS ...
- 10 分钟彻底理解 Redis 的持久化和主从复制
在这篇文章,我们继续有关Redis方面知识的学习,一起了解一下其中一个非常重要的内容:Redis的持久化机制. 什么是Redis持久化? Redis作为一个键值对内存数据库(NoSQL),数据都存储在 ...
- Python 35个内置函数，你都ok吗？
Python一共有60多个内置函数,今天先梳理其中35 个 1 abs() 绝对值或复数的模 . In [1]: abs(-6)Out[1]: 6 2 all() 接受一个迭代器,如果迭代器的所有元素 ...
- mitmproxy(TLS错误)
一.原来的基础上添加代码 """ This inline script allows conditional TLS Interception based on a us ...
- 四十六、SAP的Message中E和W区别
一.如果写的是E,则报红色的信息,如图 效果如下 二.如果是写的是W,则报黄色的信息 效果如下
- 如何安装Anaconda
如何安装Anaconda Python作为一门易读.易维护的语言,在工作和学习中应用广泛,被大量用户所欢迎.本文主要给大家介绍一下Anaconda 步骤 1 Anaconda在官网就可以下载,网址:h ...
- SMPL模型Shape和Pose参数
两部分 1.Pose参数 2.Shape参数 一 Pose参数 共24个关节点,对应idx从0到23,图中3个小图分别表示zero shape只有idx节点分别绕x/y/z轴旋转. 其中蓝色线表示-p ...