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

随机推荐

VUE-Windows系统下搭建vue环境
一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径.. 此处默认安装这4项即可,点击Next按钮. ...
IDEA破解
1. 官网下载 idea激活进入 C:\Windows\System32\drivers\etc 编辑host文件加入0.0.0.0 account.jetbrains.com 2.打开ID ...
Java子线程中操作主线程Private级别数据
两个类分别如下: <pre name="code" class="java">package Demo2; import java.util.*; ...
DirectX11 With Windows SDK--01 DirectX11初始化
前言由于个人觉得龙书里面第4章提供的Direct3D 初始化项目封装得比较好,而且DirectX SDK Samples里面的初始化程序过于精简,不适合后续使用,故选择了以Init Direct3D ...
command not found
1.问题(problem) #wget gzip.x86_64 0:1.5-10.el7 -bash: wget command not found 2.解决(solution) 两个都能用 yum ...
命令框下上传到gitee
git常用命令 C:\Users\Administrator>cd www/p2p设置账号C:\Users\Administrator\www\p2p>git config --globa ...
Django组件-用户认证
用户认证一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...
干货分享：让你分分钟学会 javascript 闭包(转)
闭包,是javascript中独有的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直 ...
【原创】运维基础之Docker（3）搭建私有仓库
下载并启动registry $ docker pull registry$ docker run --name my_registry -d -p 5000:5000 -v /var/lib/regi ...
iOS ipa 重签名 resign
这篇关于codesign的文章不错 https://www.objccn.io/issue-17-2/ 英文原文:https://www.objc.io/issues/17-security/insi ...

CSS3_动画 animation

CSS3_动画 animation的更多相关文章

随机推荐

热门专题