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

随机推荐

金融量化分析【day112】：均值回归策略
一.均值回归策略 1.什么是回归策略二.归一标准化 import numpy as np a = np.random.uniform(100,5000,1000) b = np.random.uni ...
Spring的事务机制
---恢复内容开始--- 内定的=>(只需要在xml 中添加一个bean) 在xml 中添加 <bean id="listener" class="com.t ...
NOI-OJ 2.2 ID:6261 汉诺塔
思路汉诺塔是递归思想最经典的例子,通过递归不断缩小问题,将n个盘子的问题简化n-1个,直至1个. 三个盘子,分别为A:from,B:to,C:by(A为起点盘,B为目标盘,C为中转盘) 过程将1- ...
MongoDB实战性能优化
1. 性能优化分类 mongodb性能优化分为软件层面和操作系统层面. 软件层面,一般通过修改mongodb软件配置参数来达到,这个需要非常熟悉mongodb里面的各种配置参数: 而操作系统层面,相对 ...
HTML（九）HTML 条件注释规范
HTML 条件注释(hack常用) IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素.很显然这种方法的最大好处就在于属于微软官方给出的 ...
axios发送post请求，如何提交表单数据？
axios发送post请求,提交表单数据的方式默认情况下,axios将JavaScript对象序列化为JSON.要以application / x-www-form-urlencoded格式发送数据 ...
zabbix通过php脚本模拟业务访问redis验证nosql的可用性
背景: redis通过shell脚本进行监控,没有问题,应用报警连不上redis,此时需要通过php模拟web环境进行redis的操作来确认web服务器是否能正常和redis通信 .配置nginx,让 ...
《剑指offer》数组中出现一半次数的数字
本题来自<剑指offer> 反转链表题目: 思路: C++ Code: Python Code: 总结:
Apache服务器中设置端口映射和反向代理的方法
在/etc/httpd/conf路径下的httpd.conf文件###new add for webui.cong###Include "E:/local/Wamp/bin/apache/A ...
Java判断水仙花数
水仙花数水仙花数(Narcissistic number)也被称为超完全数字不变数(pluperfect digital invariant, PPDI).自恋数.自幂数.阿姆斯壮数或阿姆斯特朗数( ...

CSS3_动画 animation

CSS3_动画 animation的更多相关文章

随机推荐

热门专题