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. 运行.xcworkspace项目后报错：'React/RCTBundleURLProvider.h’ file not found

    情况:根据https://github.com/rebeccahughes/react-native-device-info添加依赖库,运行.xcworkspacea项目后报错 解决:Delete n ...

  2. （21）纹理缓存（Texture Cache）

    简介 纹理缓存是将纹理缓存起来方便之后的绘制工作.每一个缓存的图像的大小,颜色和区域范围都是可以被修改的.这些信息都是存储在内存中的,不用在每一次绘制的时候都发送给GPU. CCTextureCach ...

  3. rails常用gem

    一,开发模式下 1,better_errors 使用全新的页面替换 Rails 默认的错误页面,显示更多的上下文信息,例如源码 和变量的值:配合binding_of_caller可以执行代码查看变量的 ...

  4. Linux 中的 Service

    参考: cnblogs.com/xiaofan21 - linux service和daemon cnblogs.com/xuange306 - linux service命令常见使用方法 cnblo ...

  5. Python 中的多维字典

    Python中的dict可以实现迅速查找.那么有没有像数组有二维数组一样,有二维的字典呢?比如我需要对两个关键词进行查找的时候.2D dict 可以通过 dict_2d = {'a': {'a': 1 ...

  6. 五,动态库(dll)的封装与使用

    在项目开发中,我们经常会使用到动态库(dll),要么是使用别人的动态库,要么是将功能函数封装为动态库给别人用.那么如何封装和使用动态库呢?以下内容为你讲解. 1.动态库的封装 以vs2010为例,我们 ...

  7. 20145204《Java程序设计》第8周学习总结

    20145204 <Java程序设计>第8周学习总结 教材学习内容总结 java.util.logging包提供了日志功能相关类与接口,不必额外配置日志组件,就可以在java平台中使用.使 ...

  8. php 获取某个日期n天之后的日期

    <?php $date=date_create("2013-03-15"); date_add($date,date_interval_create_from_date_st ...

  9. Lua中获取table长度

    -- table.getn(tableName) 得到一个table的大小,等同于操作符# -- 要注意的是:该table的key必须是有序的,索引是从1开始的. --例如有序的 local xian ...

  10. 理解flex布局

    我们传统的布局方式是基于在盒子模型下的,依赖于display属性的,position属性的或者是float属性的,但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话,我们常见的会让其元 ...