animation是CSS3中极其强大的功能，它可以完成许多炫酷有趣的动画效果，网上也有非常不错的类库。下面将做详细介绍。

1.@keyframes:用于定义动画的具体动作（帧动作），一般要加上浏览器前缀。

2.animation-name:给动画定义名称，用于在元素调用动画对象

3.animation-duration:设置动画动作持续的时间

4.animation-timing-function:动画的过渡速度

　　取值：ease(默认值),linear(匀速),ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)

5.animation-delay:设置动画延迟时间

　　通过以上5点，就可以开始做简单的动画了。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width:100px;

            height: 100px;

            background-color: #f00;

            animation-name:fromLeftToRight;    /*调用名为fromLeftToRight的动画*/

            animation-duration:1s;   /*动画持续1s*/

            animation-timing-function:ease;  /*逐渐变慢*/

            animation-delay:0.4s;    /*延迟0.4s后执行*/

        }

        @keyframes fromLeftToRight{   /*定义动画的名称，以下为动画具体动作*/

            from{

                margin-left:0px;

            }

            to{

                margin-left:100px;

            }

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　此时动画只会在页面内执行一次，若想动画持续循环执行，那么就要用到以下属性

6.animation-iteration-count:设置动画执行次数

　　取值：number 或 infinite(无限)

　　给上述代码添加属性，那么结果将会是：

animation-iteration-count:infinite;

 

　　能看出动画在进行无限次循环运动，美中不足的是当运动到达margin-left:100px的位置时，动画重置，再继续运动，看起来非常生硬，此时我们可以添加一个 往返运动的效果，让画面看起来更平滑。

7.animation-direction:设置动画在循环运动中的执行方向

　　取值：normal(正常方向)

reverse(反向运动)

alternate(先正常运行，再反向运行)

alternate-reverse(先反向运行再正常运行)

　　再代码中继续添加属性：

animation-direction:alternate;   /*往返运动*/

 

　　这样看起来效果就好多了。这种效果是固定不变的，然而在应用中，动画效果在更多的情况下是为了与用户进行交互，从而提升应用的用户体验，所以接下来介绍一个与交互相关的属性。

8.animation-play-state:设置动画对象的运动状态(暂停/运行)

　　取值：paused(暂停)

running(运行)

　　来，我们继续折腾上面的代码。

div:hover{

     animation-play-state:paused;   /*鼠标经过时动画暂停*/

}

 是男人就拿鼠标撩我

　　正常情况下，若animation-iteration-count:1的时候，动画结束将重置，这将造成非常不好的用户体验，此时我们可以通过一个属性来控制对象在运动结束后的状态。

9.animation-fill-mode:设置动画时间之外的状态，如定格结束后的状态(forwards)。

　　取值：none　　不设置

　　　　   forwards　　设置对象状态为动画结束时的状态

　　　　   backwards   设置对象状态为动画开始时的状态

　　　　   both　　设置对象状态为动画结束或开始的状态

　　想不出太好的例子，我们还是继续撸上面的代码吧。搞起：

animation-iteration-count:1;  /*也可以不设置此属性，则默认为1*/

animation-fill-mode:forwards; /*将运动的最后状态作为结束状态*/

 

10.语法缩写：animation：name | duration | timing-function | delay | iteration-count | direction | play-state | fill-mode .

　　其中只有 name 和 duration 是必填属性。那么页面中最上面的一段代码可缩写为：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width:100px;

            height: 100px;

            background-color: #f00;

            animation-name:fromLeftToRight 1s ease 0.4s;  /*是不是简洁多了？*/

        }

        @keyframes fromLeftToRight{   /*定义动画的名称，以下为动画具体动作*/

            from{

                margin-left:0px;

            }

            to{

                margin-left:100px;

            }

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

animationx详解的更多相关文章

  1. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  2. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  3. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  4. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  5. Android Notification 详解（一）——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  6. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  7. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

随机推荐

  1. BCB中换行 需要 \r\n

    例如: fprintf(fp,"\n");无换行效果 fprintf(fp,"\r\n");有换行效果

  2. C# 复杂格式多级深度XML序列化反序列化

     default.xml 文件如下: <config><partnerships>  <partnership name="Main_Listener" ...

  3. #C++初学记录(高精度运算)（加法）

    高精度运算 不管是int还是double亦或者long long ,这些定义变量都有数据范围的一定限制,在计算位数超过十几位的数,也就是超过他们自身的数据范围时,不能采用现有类型进行计算,只能自己通过 ...

  4. Linux 安装配置 Nginx

    前言 准备用flask做一个自己的博客网站,打算用Nginx来部署,所以在阿里云的服务器上安装Nginx,参考了很多教程,现在将步骤以及自己遇到的坑写下来,希望能对别人有所帮助. 我用的服务器是阿里云 ...

  5. SQLServer cast()函数

    语法: CAST (expression AS data_type) 参数说明: expression:任何有效的SQLServer表达式. AS:用于分隔两个参数,在AS之前的是要处理的数据,在AS ...

  6. 20145318《网络对抗》逆向及Bof基础

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  7. Signing package index... Cannot open file '/home/jello/openwrt/key-build' for reading

    一.环境 发行版:Ubuntu 18.04.1 LTS 代号:bionic 内核版本:4.15.0-30-generic 二.背景 在编译Openwrt/LEDE时出现以下错误,进而自动终止了编译: ...

  8. 简单线性dp

    小zc现在有三个字符串,他想知道前两个字符串能不能生成第三个字符串,生成规则如下:第一个串的每个字符都可以往第二个串的任意位置插入(包括首尾位置),但必须保证来源于第一个串中的字符在生成后的串中的相对 ...

  9. hdu 3792 Twin Prime Conjecture 前缀和+欧拉打表

    Twin Prime Conjecture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. Java的封装性、继承性和多态性

    封装 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 封装的优点: 便于使用者正确.方便的使用系 ...