CSS3_动画 animation
在项目中，颜色，图片，等等数据都保存在数组中
动画
使元素从一种样式逐渐变化到另一种样式的
animation: name ;
无顺序要求，但是必须先写 持续时间 ，再写 延迟时间
- 原理
人眼在看到画面的0.34 秒内，画面不会消失
在一幅画面还没消失之前，播放下一张画面
- 关键帧 @keyframes
/* 动画的名称 */
@keyframes animationname {
keyframes-selector { /* （关键帧的选择器，动画持续时间的百分比，参照花费的总时间） 或者 （from 代表 0%，to 代表 100%%） */
/* cssStyles; */
}
} /**** 实例 ****/
#box {
width: 200px;
height: 200px;
background-color: olive; animation-name: yidong; /* 1. 动画的名称 */ animation-duration: 10s; /* 2. 动画持续时间 */ animation-delay: 3s; /* 4. 动画执行前等待的时间 */ animation-fill-mode: both; /* 8. 设置动画外的状态 ，① 动画执行前的状态 backwards
② 动画执行完以后的 to 状态 forwards
③ 元素开始时与 from 状态一致，结束与 to 状态一致 both */ /* 检测的是关键帧的区间（0%-50%，50%-100%） */
animation-timing-function: linear; /* 3. 设置动画的类型
（默认值 ease，
还有 linear，
贝塞尔曲线cubic-bezier(0.07, 1.4, 0.86, 1.47)，
1个区间跳2次 steps(2)） */
animation-iteration-count: 2; /* 5. 动画执行次数，无限次 infinite 或者 具体次数 */ animation-direction: alternate; /* 6. 设置对象动画运动方向，默认值正常 normal，
相反方向，从结束向开始动画 reverse，
先正常运动，再反向运动____钟摆动画 alternate 需配合 infinite，
先反向运动，再正常运动 alternate-reverse 需配合 infinite*/
animation-play-state: running; /* 7. 设置对象状态： 运行 running / 暂停 paused */
} #box {
animation-play-state: paused; /* 当鼠标悬浮时，动画暂停 */
} @keyframes yidong {
0% { transform: translateX(0px); } /* 等同于 from {} */ 50% { transform: translateX(20px); } 100% { transform: translateX(20px); } /* 等同于 to {} */
}
用来控制动画变化的关键位置（而非所有位置）
- 编写位置
- 帧函数 编写在 控制元素样式的 外面
- animation 的属性 编写在 控制元素样式里面
- animation-name: yidong; /* 1. 动画的名称 */
- animation-duration: 10s; /* 2. 动画持续时间 */
- animation-timing-function: linear; /* 3. 设置动画的类型
- ease 默认值
- linear
- cubic-bezier(0.07, 1.4, 0.86, 1.47) 贝塞尔曲线
- steps(2) 1个区间跳2次
- animation-delay: 3s; /* 4. 动画执行前等待的时间 */
- animation-iteration-count: 2; /* 5. 动画执行次数
- infinite 无限次
- 具体次数 */
- animation-direction: alternate; /* 6. 设置对象动画运动方向
- normal 默认值正常
- reverse 相反方向，从结束向开始动画
- alternate 先正常运动，再反向运动____钟摆动画 需配合 infinite
- alternate-reverse 先反向运动，再正常运动 需配合 infinite
- animation-play-state: running; /* 7. 设置对象状态
- running 运行
- paused 暂停
- animation-fill-mode: both; /* 8. 设置动画外的状态
- backwards 动画执行前的状态
- forwards 动画执行完以后的 to 状态
- both 元素开始时与 from 状态一致，结束与 to 状态一致
- 动画执行完以后，立刻恢复原来状态。
兔斯基动画 （精灵图 steps infinite）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Crazy Rabbit</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
padding-top: 300px;
padding-left: 300px;
} /**** rabbit ****/
#running_box {
width: 48px;
height: 48px;
background: url("./img/rabbit.png") no-repeat;
background-position: 0px 0px; animation: crazyRabbit 340ms steps(12) 0s infinite alternate;
}
@keyframes crazyRabbit {
from {
background-position-x: 0px;
}
to {
background-position-x: -576px;
}
}
#running_box:hover {
animation: paused;
}
</style>
</head> <body> <div id="running_box"> </div> </body>
</html>
自行车动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Running Bike</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
padding: 300px 0 0 300px;
} /**** Running Bike ****/
#bike_box {
width: 130px;
height: 130px;
background: url("./img/bike.png") no-repeat; animation: bike 1s steps(32) infinite;
}
@keyframes bike {
from {background-position: 0px 0px}
to {background-position: 0px -4160px}
}
#bike_box:hover {
animation: paused;
}
</style>
</head> <body> <div id="bike_box"> </div> </body>
</html>
开机动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="viewport"
content="user-scalable=no,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0"/> <script type="text/javascript" src="./js/kjfFunctions.js"></script> <style rel="stylesheet" type="text/css">
html, body, div, ul, li {
margin: 0;
padding: 0;
} html, body {
width: 100%;
height: 100%; /* 参照屏幕区域的高 */
min-width: 600px;
overflow: hidden;
} #wrap {
width: 100%;
min-height: 100%; background: cadetblue;
} #content {
width: 100%; padding-bottom: 50px; font-size: 14px;
background: darkgrey;
} #footer {
width: 100%;
height: 50px; margin-top: -50px; background: chocolate;
text-align: center;
line-height: 50px;
} #loading_animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); list-style: none;
background-color: #bbb0;
} #loading_animation li {
float: left; margin-right: 10px;
animation: jumpLetter 1s infinite alternate;
}
@keyframes jumpLetter {
from {
transform: translateY(0px);
} to {
transform: translateY(-15px);
}
}
</style>
</head> <body> <!-- 模拟屏幕区域 -->
<div id="wrap"> <!-- 内容区域 -->
<div id="content">
<ul id="loading_animation">
<li>L</li>
<li>o</li>
<li>a</li>
<li>d</li>
<li>i</li>
<li>n</li>
<li>g</li>
</ul>
</div>
</div> <!-- 底部区域 -->
<div id="footer"> </div> <script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript">
var lis = document.querySelectorAll("#loading_animation li"); var colorArr = ["red", "green", "blue"];
var i = 0;
for(i=0; i<lis.length; i++){
lis[i].style.color = colorArr[i%3]; lis[i].style.animationDelay = i*100+"ms";
}
</script>
</body>
</html>
CSS3_动画 animation的更多相关文章
- 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)
× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- 精灵动画Animation对话框组成Idle动画的各精灵
精灵动画Animation对话框组成Idle动画的各精灵 1.3 精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...
- Qt-4.6动画Animation快速入门三字决
Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- Android 动画animation 深入分析
转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...
- View 动画 Animation 运行原理解析
这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...
- CSS3动画属性：动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- 《The Cg Tutorial》阅读笔记——动画 Animation
这段时间阅读了英文版的NVidia官方的<The Cg Tutorial>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...
随机推荐
- [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.3 位移梯度张量与无穷小应变张量
1. 位移向量 $$\bex {\bf u}={\bf y}-{\bf x}. \eex$$ 2. 位移梯度张量 $$\bex \n_x{\bf u}={\bf F}-{\bf I}. \eex$ ...
- densenet 中的shortcut connection
DenseNet 在FCN 网络中考虑加入skip connection,在resnet 中加入identity 映射,这些 shortcut connection等结构能够得到更好的检测效果,在d ...
- java(10)类的无参方法
一.变量的作用域(有效的使用范围) 1.变量有2种 1.1成员变量(属性) 声明在类的里面,方法的外面 1.2 局部变量 声明在方法里面或for循环结构中 2.调用时的注意事项(初始值不同.作用域不同 ...
- 目标检测网络之 YOLOv3
本文逐步介绍YOLO v1~v3的设计历程. YOLOv1基本思想 YOLO将输入图像分成SxS个格子,若某个物体 Ground truth 的中心位置的坐标落入到某个格子,那么这个格子就负责检测出这 ...
- iTOP-开发板-MiniLinux-C程序调用shell命令
本文档介绍的是在 linux 系统环境下 linux-C 调用 shell 命令实验步骤,和文档压缩包一起的“iTOP-开发板-MiniLinux-SHELL_V1.0.zip”是 c 程序源码.Li ...
- windows系统上安装mysql操作过程及常见错误处理
1.下载mysql免安装版本,下载地址:http://dev.mysql.com/downloads/mysql/ 解压到自己的目录 2.编辑配置文件: 新建一个文本文件,修改名称及后缀为my.ini ...
- 拓扑排序（Topological Sorting）
一.什么是拓扑排序 在图论中,拓扑排序(Topological Sorting)是一个有向无环图(DAG, Directed Acyclic Graph)的所有顶点的线性序列.且该序列必须满足下面两个 ...
- [ZJOI2008]树的统计-树链剖分
#include<bits/stdc++.h> using namespace std; const int maxn = 1e6+5; #define mid ((l+r)>> ...
- Kafka简单使用
前言 这几天在写 shell 脚本,学到不少,但是没啥心得之类的,有空可以写个总结(但是大概率不会发表) 现在不算很忙,想再学一点 消息队列相关知识 目前比较出名的也就 RabbitMQ 和 Kafk ...
- noj算法 迷宫问题 回溯法
描述: 给一个20×20的迷宫.起点坐标和终点坐标,问从起点是否能到达终点. 输入: 多个测例.输入的第一行是一个整数n,表示测例的个数.接下来是n个测例,每个测例占21行,第一行四个整数x1,y1, ...