<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>animation动画</title>

    <style>

        @keyframes change {

            10%{

                background-color: red;

            }

            50%{

                background-color: black;

            }

            100%{

                background-color: orange;

                width: 500px;

            }

        }

        #animation{

            width: 100px;

            height: 100px;

            background-color: darkslategray;

            /*使用动画必要的两个属性*/

            /*1.制定动画名称*/

            animation-name: change;

            /*2.动画持续时间*/

            animation-duration: 5s;

            /*3.动画播放次数(infinite:无限次播放)*/

            animation-iteration-count: 2;

            /*4.动画使用的速度函数*/

            animation-timing-function: linear;

            /*5.动画在下一次播放的方向(Z方式展示)*/

            animation-direction: Alternate;

            /*6.动画执行完毕后的状态*/

                /*1.forwards:动画保持最后的显示效果*/

                /*2.backwards:动画回到最初的显示效果*/

            animation-fill-mode: both;

            /*7.动画延迟时间*/

            animation-delay: 2s;

        }

    </style>

</head>

<body>

<div id="animation"></div>

</body>

</html>

　　

03.CSS动画-->自定义动画的更多相关文章

  1. AndroidUI 视图动画-自定义动画效果 （Animation）

    如果Android提供的四种动画 效果 和混合动画效果 不能够 满足需求的话,可以使用自定义动画效果 : 新建一个类CustomAnimation 使其继承自 android.view.animati ...

  2. Java 给PPT添加动画效果（预设动画/自定义动画）

    PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...

  3. 自定义动画css属性

    自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...

  4. css自定义动画在微信中无法执行的原因

    这是我去年年底遇到的一个问题, 在这个过程中我发现了一个比较有趣的问题. 我们在做抽奖的时候,微信分享到朋友圈的页面里,安卓机器无法执行页面中的自定义动画(元宝的位移,进入按钮的放大缩小等等).这让我 ...

  5. jQuery中关于如何使用animate自定义动画

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...

  6. CSS篇之动画（2）

    animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...

  7. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  8. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  9. velocity自定义动画

         话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录.        废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...

随机推荐

  1. 使用sqlyog将sql server 迁移到mysql

    使用软件工具sqlyog(64位) sqlyog 迁移步骤 1.使用sqlyog连接目标数据库 连接目标数据库 2.选择目标数据库(需要先把表结构建好,从SQL Server同步表结构也可以使用工具, ...

  2. C++类的构造函数及定义

    定义一个普通的类时,一定要定义它自己的构造函数.原因有三:第一个原因是编译器只有在发现类不包含任何构造函数的情况下才会替我们生成一个默认的构造函数,一旦我们定义了一些其他的构造函数,那么除非我们再定义 ...

  3. [转] Elasticsearch 6.1官方入门教程

    一篇比较简要又全面的elasticsearch教程. https://blog.csdn.net/hololens/article/details/78932628

  4. 利用scrapy-client发布爬虫的远程服务器

    一.环境准备 远程服务器必须装有scapyd,我们使用的机器必须有scrapy-client(我这里是windows),并确保这两者正常安装并启动. 二.客户端准备上传 首先进入到爬虫项目的根文件夹: ...

  5. c# 抽象类 抽象方法

    抽象类与非抽象类的主要区别: ·抽象类不能直接被实例化 ·抽象类中可以包含抽象成员,但非抽象类中不可以 ·抽象类不能被密封 声明抽象方法时需注意:·抽象方法必须声明在抽象类中 ·声明抽象方法时,不能使 ...

  6. 查看Postgresql的连接状况

    今天遇到一个问题,就是pg一直报错,说有太多的客户端连接到数据库上面.但现在不知道是什么程序连接.pg默认的max_connection是100,我并没有修改过,以为平时公司内部用,应该够了,但现在貌 ...

  7. WCF系列教程之WCF客户端异常处理

    本文参考自:http://www.cnblogs.com/wangweimutou/p/4414393.html,纯属读书笔记,加深记忆 一.简介 当我们打开WCF基础客户通道,无论是显示打开还是通过 ...

  8. hibernate_boolean类型的处理

    xml方式,直接写就行,hibernate会直接帮你生成: javaBean代码片段: private boolean leaf; public boolean isLeaf() { return l ...

  9. python-FTP模块

    #!/user/bin/python #coding=utf-8 import ftplib import os import socket HOST = 'ftp.kernel.org' DIRN ...

  10. PHP之string之implode()函数使用

    implode (PHP 4, PHP 5, PHP 7) implode - Join array elements with a string implode - 将一个一维数组的值转化为字符串 ...