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>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...
随机推荐
- Java进程线程笔记
什么是并行和并发? 并发和并行是即相似又有区别:(微观) 并行:指两个或多个事件在同一时刻发生: 强调的是时间点. 并发:指两个或多个事件在同一时间段内发生: 强调的是时间段. 进程和线程的区别? 进 ...
- 运维工作笔记-------nginx的反向代理
1.nginx的反向代理意义 一般来说,我们在项目中,不会直接让项目服务器ip与外网做直接映射,这样一则是不安全,二是客户直接去访问项目服务器,对项目服务器带来的压力太大,从而导致项目运行速度变慢,程 ...
- Educational Codeforces Round 33 (Rated for Div. 2) E. Counting Arrays
题目链接 题意:给你两个数x,yx,yx,y,让你构造一些长为yyy的数列,让这个数列的累乘为xxx,输出方案数. 思路:考虑对xxx进行质因数分解,设某个质因子PiP_iPi的的幂为kkk,则这个 ...
- xls表格 ctrl+D 和ctrl+Enter区别 --快速填充相同数据，同时填充多个不同数据
一.ctrl+Enter应用 如何快速实现下图两个图的填充值效果? ==>效果 1. 选择A列,或者所需要填充的范围 (下面利用 ctrl+G定位应用) 2.Ctrl+G 定位 选择 空值 在 ...
- Django 反向解析
#1,定义: #随着功能的增加会出现更多的视图,可能之前配置的正则表达式不够准确,于是就要修改正则表达式,但是正则表达式一旦修改了,之前所有对应的超链接都要修改,真是一件麻烦的事情,而且可能还会漏掉一 ...
- EmbeddedSolrServer的使用与solor6.3.0的使用
1. 到solr官网下载对应版本的solr: https://lucene.apache.org/solr/ 我下载的是:6.3.0版本(需要JDK8),solr默认集成了jetty容器,而且在 ...
- tengine2.2.3报错502的The proxy server received an invalid response from an upstream server问题处理
tengine2.2.3报错502的The proxy server received an invalid response from an upstream server问题处理 现象:访问订单的 ...
- 51nod--1079 中国剩余定理
题目: 1079 中国剩余定理 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K ...
- 如何查询oracle数据库中的各种角色
1. 查询oracle中所有用户信息select * from dba_users;2. 只查询用户和密码select username,password from dba_users;3. 查询当前 ...
- Java的家庭记账本程序（I）
日期:2019.2.26 博客期:037 星期二 Part 1: 今天使用新的"radio"标签,将搜索方式的选则内容更改了,如下图,不过,研究了很久的数据库连接也还是没有成功!嗯 ...