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 ...
随机推荐
- yii2.0 引入权限控制插件
权限控制:"mdmsoft/yii2-admin": "~2.0" 教程:http://www.cnblogs.com/zyf-zhaoyafei/p/5825 ...
- 029、Java中的四则运算
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 010-PHP输出数组中第某个元素
<?php $monthName = array(1 => "January", "February", "March",//初 ...
- P1005 继续(3n+1)猜想
转跳点:
- windowsXP下 使用live555搭建视频服务器，并使用ffplay和VLC播放
首先在官网下载live555:http://www.live555.com/mediaServer/#downloading当然是现在windows的版本了!!上官网下载FFmpeg:http://f ...
- 又一个无效的列类型错误Error setting null for parameter #7 with JdbcType NULL . Try setting a different JdbcType for this parameter or a different jdbcTypeForNull configuration property. Cause: java.sql.SQLExcept
在更新数据时候出现的错误 更新代码如下: <update id="modify" parameterType="Standard"> update ...
- Day4-T2
原题目 某大厦共有 N 层,现在知道共有 K 个请求要上下电梯:下面告诉你每个请求乘电梯的出发层次和结 束层次.请你求出整个电梯的运行过程.假设电梯一开始停在第一层,运行 K 个请求最后回到第一层. ...
- 第三篇：Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- Django——include()三种使用方法
include()的三种使用方法 1.include(module, namespace=None) 2.include(pattern_list) 最常用 3.include((pattern_l ...
- gem5-gpu全系统模式
# 注意:安装好gem5-gpu后再配置全系统环境 # 下载全系统模拟需要的工具,详见http://gem5.org/Running_gem5#Full_System_.28FS.29_Mode,将L ...