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

随机推荐

监控c3p0的连接池
SqlSession session = SessionFactory.getSqlSession(dbid); List<Map<String, Object>> resul ...
【转载】c++类的实例化与拷贝
https://www.cnblogs.com/chris-cp/p/3578976.html c++的默认拷贝构造函数,从深度拷贝和浅拷贝说起: https://blog.csdn.net/qq_2 ...
Jasmine
Jasmine https://www.npmjs.com/package/jasmine The Jasmine Module The jasmine module is a package of ...
LINUX 常用命令（一）
1.LINUX系统常用命令实例: A0 LINUX命令分内置命令和非内置命令! 一般而言,内置命令就是指在/bin ./usr/bin下系统默认的命令! 非内置命令需要加上命令的绝对路径执行!比如我们 ...
C# 插件化方案（Add-In)
白话插件框架原理 WPF 插件开发(.NET Framework 3.5 System.Addin) 原文:AddIn Enabled Applications
CSS盒模型（Box Model）
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
鼠标右键添加Sublime Text
鼠标右键添加Sublime Text 参考将sublime添加到鼠标右键实践 1. win+R 输入regedit 2. 输入路径: 计算机\HKEY_CLASSES_ROOT\*\shell\ ...
Java 计算两个日期相差月数、天数
package com.myjava; import java.text.ParseException; import java.text.SimpleDateFormat; import java. ...
dubbo负载均衡与集群集群容错
1.负载均衡在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用. 1. 负载均衡策略 Random LoadBalance 随机,按权重设置随机概率.(默认值)在一个 ...
ansible的Filter
filter的格式: value..| filter() 在python中就是类的实例化 filter(self,*args,**kwargs) self就是filter中管道符前的value. ...

CSS3_动画 animation

CSS3_动画 animation的更多相关文章

随机推荐

热门专题