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. curl基本使用

    curl简介 linux curl是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载. curl可以使用URL的语法模拟浏览器来传输数据,因为它是模拟浏览器,因此它同样支持多种协 ...

  2. VS2010/MFC编程入门之二十九（常用控件：列表视图控件List Control 下）

    上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构体的定义.本节继续讲解下半部分,包括列表视图控件的创建.CListCtrl类的主要成员函数 ...

  3. 2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) Solution

    A:Exam Solved. 温暖的签. #include<bits/stdc++.h> using namespace std; ; int k; char str1[maxn], st ...

  4. Entity Framework 数据生成选项DatabaseGenerated(转)

    在EF中,我们建立数据模型的时候,可以给属性配置数据生成选项DatabaseGenerated,它后有三个枚举值:Identity.None和Computed. Identity:自增长 None:不 ...

  5. windows监听socket和标准输入

    原来的代码 def input_command(self): msg = raw_input('\nPlease input the command:') remote_id = raw_input( ...

  6. ListView的ScrollBar设置

    默认ListView的滑动时,右侧会有滑动条显示,等ListView滑动结束时,滑动条消失.修改ScrollBar的显示可以在XML以及CODE中实现. CODE中实现:1.setFastScroll ...

  7. [置顶] SNMP协议详解<三>

    在上篇文章中,说到了SNMPv3主要在安全性方面进行了增强,采用USM(基于用户的安全模型)和VACM(基于视图的访问控制模型)技术.下面我们就主要讲解SNMPv3的报文格式以及基于USM的认证和加密 ...

  8. Activiti工作流引擎简介

    Activiti工作流引擎简介 一.概述 Activiti是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理,工作流,服务协作等领域的一个开源,灵活 ...

  9. 《Effective Java 2nd》第8章 通用程序设计

    目录 第45条 将局部变量的作用域最小化 第46条 for-each循环优先于传统的for循环 第47条 了解和使用类库 第48条 如果需要精确的答案,避免使用float和double 第49条 基本 ...

  10. php 二维数组

    <?php // 一个二维数组 $cars=array ( array(,), array(,), array(,) ); ?>