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. 20155331 2016-2017-2 《Java程序设计》第8周学习总结

    20155331 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了cle ...

  2. 如何使用STM32F4的BootLoader和APP程序

    源:如何使用STM32F4的BootLoader和APP程序 STM32 BootLoader升级固件

  3. Sybase数据库第三方软件安装

    Sybase数据库第三方软件安装 1,安装软件:IQNC160011P_1-20011253.ZIP

  4. 20145325张梓靖 《Java程序设计》第9周学习总结

    20145325张梓靖 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC Java语言访问数据库的一种规范,是一套API.JDBC (Java Database Connec ...

  5. shell脚本中多个条件判断的语法

    if [ "$content" = "hello" ]\ || [ "$content" = "kitty" ] the ...

  6. C#中的静态构造函数

    https://msdn.microsoft.com/en-us/library/k9x6w0hc(v=vs.140).aspx A static constructor is used to ini ...

  7. luogu P1017 进制转换

    感觉这个题 是真的恶心 本来单纯就递归写,发现好难 后来用数组记录 然后考虑 指数为 奇和偶数 分别 <0 和 > 进制的情况 其实 用进制数为3 大概讨论四种情况就可以了 由于最近就是在 ...

  8. 解决 docker: Error response from daemon: ... : net/http: TLS handshake timeout.

    参考:解决 Docker pull 出现的net/http: TLS handshake timeout 的一个办法 问题: 执行 $ sudo docker run hello-world 时出现: ...

  9. codeforces 98 div2 C.History 水题

    C. History time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  10. Mac系统下adb工具的配置

    sudo vim ~/.bash_profile 增加如下内容 ANDROID_HOME=/Users/apple/Library/Android/sdk export PATH=$PATH:$AND ...