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>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...

随机推荐

DirectX11 With Windows SDK--09 纹理映射与采样器状态
前言在之前的DirectX SDK中,纹理的读取使用的是D3DX11CreateShaderResourceViewFromFile函数,现在在Windows SDK中已经没有这些函数,我们需要找到 ...
Ubuntu 开机自动挂载硬盘
1.查看Linux硬盘信息: $ sudo fdisk -l 2.格式化硬盘(根据需要确定文件系统): sudo mkfs.xfs /dev/sdb 3.创建/data目录 sudo mkdir /d ...
动态规划dp
一.概念:动态规划dp:是一种分阶段求解决策问题的数学思想. 总结起来就一句话:大事化小,小事化了二.例子 1.走台阶问题 F(10):10级台阶的走法数量所以:F(10)=F(9)+F(8) F ...
Java Swing实现一个简单而优美的记事本( 较详细注释 )
Java Swing实现具有基本功能的记事本目前实现了: 文件新建打开保存退出前保存询问编辑剪切复制粘贴清除撤销格式字体选择字体颜色选择帮助关于 (样式采用了css与h ...
java8 list转map
//按id属性为map的key值 Map<Integer, User> userMap = list.stream().collect(Collectors.toMap(User::get ...
windows 下 bat 计划任务删除保留时间内文件
date windows 打印时间戳年:echo %date:~,% 月:echo %date:~,% 日:echo %date:~,% 星期:echo %date:~,% 小时:echo %t ...
luogu P5294 [HNOI2019]序列
传送门这个什么鬼证明直接看uoj的题解吧根本不会证明首先方案一定是若干段等值的$B$,然后对于一段,$B$的值应该是$A$的平均值.这个最优方案是可以线性构造的,也就是维护以区间平均值 ...
“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛 1010 Count
思路:矩阵快速幂.推一下初始矩阵就好了 #include<bits/stdc++.h> #define LL long long #define fi first #define se s ...
一、Kubernetes系列之介绍篇
•Kubernetes介绍 1.背景介绍云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什 ...
java 并发 concurrent Executor
Excutor类 Executor 执行提交的对象Runnable任务. ExecutorService 一个Executor ,提供方法来管理终端和方法,可以产生Future为跟踪一个或多个异步任务 ...

CSS3_动画 animation

CSS3_动画 animation的更多相关文章

随机推荐

热门专题