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. VS2010/MFC编程入门之十（对话框：设置对话框控件的Tab顺序）

    前面几节鸡啄米为大家演示了加法计算器程序完整的编写过程,本节主要讲对话框上控件的Tab顺序如何调整. 上一讲为“计算”按钮添加了消息处理函数后,加法计算器已经能够进行浮点数的加法运算.但是还有个遗留的 ...

  2. SQL substring()函数

    ①substring()函数是个截取函数,不同的数据库语法有区别 MySQL: SUBSTR( ), SUBSTRING( ) Oracle: SUBSTR( ) SQL Server: SUBSTR ...

  3. pyDay15

    内容来自廖雪峰的官方网站. 1.Python提供的sum()函数可以接受一个list并求和,请编写一个prod()函数,可以接受一个list并利用reduce()求积. from functools ...

  4. 前端学习笔记之JavaScript

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...

  5. poj3421 X-factor Chains(重复元素的全排列)

    poj3421 X-factor Chains 题意:给定正整数$x(x<=2^{20})$,求$x$的因子组成的满足任意前一项都能整除后一项的序列的最大长度,以及满足最大长度的子序列的个数. ...

  6. bzoj1602 / P2912 [USACO08OCT]牧场散步Pasture Walking（倍增lca）

    P2912 [USACO08OCT]牧场散步Pasture Walking 求树上两点间路径--->lca 使用倍增处理lca(树剖多长鸭) #include<iostream> # ...

  7. 20145339顿珠达杰 《网络对抗技术》 逆向与Bof基础

    目的 通过一些方法,使能够运行本不该被运行的代码部分,或得到shell的使用: 将正常运行代码部分某处call后的目标地址,修改为另一部分我们希望执行.却本不应该执行的代码部分首地址(这需要我们有一定 ...

  8. ubuntu16.04+七彩虹GTX1060的NVIDIA驱动+Cuda8.0+cudnn5.1+tensorflow+keras搭建深度学习环境【学习笔记】【原创】

    平台信息:PC:ubuntu16.04.i5.七彩虹GTX1060显卡 作者:庄泽彬(欢迎转载,请注明作者) 说明:参考了网上的一堆的资料搭建了深度学习的开发环境,下班在宿舍折腾了好几个晚上才搞定,写 ...

  9. git commit的规范

    https://www.yuque.com/fe9/basic/nruxq8#6c228def 制定一个 git commit 信息的提交规范是开发团队工作流必不可少的环节.试想一下,如果查看主分支上 ...

  10. JS+Canvas的棋盘游戏和Java的动态结合

    二维数组的题做了有几个了,感觉很有趣,随后想到想做一个五子棋的游戏. 因为前端知识匮乏,但感觉只是Java中去用二维数组做的话还是不太难的. 首先生成15*15的棋盘,(先不考虑前后端交互),其后Ha ...