CSS3动画

假设您认为这篇文章还不错，能够去H5专题介绍中查看很多其它相关文章。

通过 CSS3，我们能够创建动画，这能够在很多网页中取代动绘图片、Flash 动画以及 JavaScript。

今日课程预览

1. 关键帧

如需在 CSS3 中创建动画，您须要学习 @keyframes 规则。

@keyframes 规则用于创建动画。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

前面我们在使用transition制作一个简单的transition效果时，

我们包括了初始属性和终于属性。一个開始运行动作时间和一个延续动作时间以及动作的变换速率。

事实上这些值都是一个中间值，假设我们要控制的更细一些。

比方说我要第一个时间段运行什么动作。第二个时间段运行什么动作

（换到flash中说。就是第一帧我要运行什么动作，第二帧我要运行什么动作），

这样我们用Transition就很难实现了，此时我们也须要这种一个“关键帧”来控制。

那么CSS3中就是由“keyframes”这个属性来实现这种效果。

下面我们一起先来看看Keyframes:

Keyframes的语法规则，

@keyframes name1{

    0%{属性名：属性值。属性名：属性值；}

    29%{属性名：属性值。属性名：属性值；}

    50%{属性名：属性值；属性名：属性值；}

    100%{属性名：属性值。属性名：属性值；}

}

我们来解释一下语法规则：

必须以@keyframes开头，后面加动画的名称。名称由自定义。语义化最好。

后面加一对大括号，里面能够写很多个百分比，百分比后面加一对大括号。

里面写要改变的属性及属性值。用分号隔开。

此外能够用from取代0%，表示初始状态，用to取代100%，表示结束状态。即写成例如以下样式：

@keyframes name1{

    from{属性名：属性值。属性名：属性值。}

    29%{属性名：属性值；属性名：属性值；}

    50%{属性名：属性值。属性名：属性值；}

    to{属性名：属性值。属性名：属性值。}

}

2. 浏览器前缀

尽管keyframes已经成为了w3c的标准属性。可是为了兼容，

我们须要在谷歌和Safari等浏览器需加上内核前缀。

一般我们设置属性的时候一般都设置五种。

  • -webkit- : 内核（google chrome、safari、猎豹、360极速版）
  • x5 ： QQ 浏览器、微信
  • ms ： 微软 IE 浏览器
  • -o-： Opera（欧朋浏览器，转入谷歌阵营了）
  • -moz-： 火狐浏览器（netscape）

3.动画 animate

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器。否则不会产生动画效果。

通过规定至少下面两项 CSS3 动画属性。就可以将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长

凝视：您必须定义动画的名称和时长。假设忽略时长，则动画不会同意。由于默认值是 0。

属性 描写叙述
@keyframes 规定动画。
animation 全部动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完毕一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。

默认是 “ease”。
animation-delay 规定动画何时開始。

默认是 0。
animation-iteration-count 规定动画被播放的次数。

默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态。

3.1 动画属性

  1. 动画名称 (animation-name)。名称是差别事物的一种最好的办法，像每个人都有自己的名字一样。我们的动画也有自己的名称，在上面学习keyframes时，我们提到了须要自己定义帧的名字。此处的名称就是刚才我们定义帧时候取的名字，是一个不可缺少的属性。

  2. 动画运行时间 (animation-duration)。在keyframes阶段我们提到了百分比指的是动画运行时间的百分比，所以动画的持续时间也是一个不可缺少的属性。单位是秒或者毫秒。

  3. 动画运行次数(animation-iteration-count)。动画的运行时间不可能是无限的，可是我们有时候须要这个动画一直运行下去，这时我们能够定义动画的运行次数为无限次，当然你也能够定义3次、4次、5、6、7、8等等次，当然定义多少次要看你的须要。

    -webkit-animation-iteration-count: 10;（无限次为infinite）

  4. 动画变换速率（animation-timing-function)。

    实际上就是动画的播放方式，它和transition中的transition-timing-function一样。具有下面几种变换方式：ease , ease-in , ease-in-out , linear , cubic-bezier。cubic-bezier指的是贝塞尔曲线，稍后会讲这一部分的内容。

  5. 延迟（animation-delay）。一个页面中可能有很多的动画，有的时候我们想有的先播放，有的后播放，那么我们怎么实现这种效果呢。animate里面引进了一个属性叫做延迟，它规定这个动画能够在延迟制定时间后再运行。

    单位是秒或者毫秒。

  6. 运动方向（animation-direction）。用来指定动画播放的方向，其仅仅有两个值。默认值为normal，假设设置为normal时，动画的每次循环都是向前播放；另一个值是alternate。他的作用是。动画播放在第偶数次向前播放。第奇数次向反方向播放。

  7. 动画的播放状态（animation-play-state）。其主要有两个值。running和paused当中running为默认值。他们的作用就相似于我们的音乐播放器一样，能够通过paused将正在播放的动画停下了。也能够通过running将暂停的动画又一次播放，我们这里的又一次播放不一定是从元素动画的開始播放。而是从你暂停的那个位置開始播放。这个属性很少有内核支持。所以仅仅是略微提一下就好。

  8. 动画时间之外的状态(animation-fill-mode)。

    我们日常经常使用的是：forwards，当动画完毕后，保持最后一个属性值（在最后一个关键帧中定义）。除此之外还有三个值，各自是none：不改变默认行为。backwards：在 animation-delay 所指定的一段时间内。在动画显示之前，应用開始属性值（在第一个关键帧中定义）。both：向前和向后填充模式都被应用。

3.2 例子代码

全部动画属性串联在一起的时候。属性的排列次数是

animation: 动画名称+动画运行时间+动画变换速率+延迟+动画运行次数+运动方向

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .animate{

                width: 100px;

                height: 100px;

                background: pink;

                animation: name1 4s linear 2s infinite alternate;

                -webkit-animation: name1 4s linear 2s infinite alternate;

            }

            @keyframes name1{

                0%{width: 100px;}

                29%{width: 200px;}

                50%{width: 50px;}

                100%{width: 100px;}

            }

        </style>

    </head>

    <body>

        <div class="animate"></div>

    </body>

</html>

4. 第三方库 animate.css

假设每次写动画都要自己去写每个运动的过程会是一件很麻烦的事。

那么能不能有一个库存在，里面有很很多的动画，

每次我们想要用动画的时候仅仅须要去这个库里面提取出来。这种话就会很方便。

也是出于这种考虑，第三方库animate.css出现了，它里面封装了很多的动画。

我们想要用的时候直接调用里面的动画就好了，接下来我们就来看动画的第三方库animate.css。

我们已经知道这是个包括了很多动画的库，

这里提供了链接，http://www.17sucai.com/pins/demoshow/9411，

我们能够里面看到不同的动画名称相应的不同效果。那么我们怎么使用这里面的动画呢，

它的用法很easy。我们详细来看：

4.1 引入第三方库

    <!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>第三方库</title>

        <link rel="stylesheet" type="text/css" href="animate.min.css"/>

    </head>

    <body>

    </body>

</html>

4.2 指定详细动画效果

方法一：

格式：animation：”name“ time；

例： animation：”flip” 2s;

表示这个名字叫做flip的动画运行时间是2s。能够看到这个方案和我们刚才学习的是一样的。

完整代码例如以下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="animate.min.css">

    <style type="text/css">

    div{

        height: 200px;

        width: 200px;

        background-color: #ccc;

        -webkit-animation: "flip" 2s;

        -o-animation: "flip" 2s;

        animation: "flip" 2s;

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

方法二：

格式：<div class=“name animated”></div>

例： <div class=“flip animated”></div>

完整代码例如以下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="animate.min.css">

    <style type="text/css">

    div{

        height: 200px;

        width: 200px;

        background-color: #ccc;

    }

    </style>

</head>

<body>

    <div class="flip animated"></div>

</body>

</html>

5. 贝塞尔曲线

我们学transition的时候。有一个属性叫做transition-timing-function，

这个属性规定了效果的速度曲线，里面有一些属性值，

  • 匀速运动linear
  • 速度逐渐变慢ease
  • 先慢后快ease-in
  • 先快后慢ease-out
  • 先慢后快再慢ease-in-out

除此之外我们另一个參数值叫做cubic-bezier，该值同意你去自定义一个时间曲线，这就是我们要讲的贝塞尔曲线。

贝塞尔曲线（The Bézier Curves），是一种在计算机图形学中相当重要的參数曲线（2D，3D的称为曲面）。

贝塞尔曲线于1962年，由法国project师皮埃尔·贝塞尔（Pierre Bézier）所发表。他运用贝塞尔曲线来为汽车的主体进行设计。

我们在日常开发中最经常使用的就是二次曲线。

偶尔会使用到三次曲线。

当然更高深的也有。可是咱们不会涉及到。

咱们在日常开发中仅仅须要会确定锚点和控制点的位置就好。

很多其它的尝试能够參考这个站点。我们不须要大家会精确定位每个点。

仅仅须要大家能够大概猜出这个点详细在哪个位置就能够啦。

http://cubic-bezier.com/#0,0,.58,1

代码实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .animate{

                width: 200px;

                height: 200px;

                background: pink;

                transition: width 3s cubic-bezier(1,.02,.31,.9);

                -webkit-transition: width 3s cubic-bezier(1,.02,.31,.9);

            }

            .animate:hover{

                width: 1000px;

            }

        </style>

    </head>

    <body>

        <div class="animate"></div>

    </body>

</html>

2016.3.17__CSS3动画__第十一天的更多相关文章

  1. Android 绘制一个Loading动画__向图片中缓慢填充颜色,从而形成动画效果

    需求:制作一个加载动画,向一个不规则图片图形中从从下到上依次填充颜色,形成动画效果. 效果如下:     代码如下: LoadingAnimatorView.java package cn.yw.li ...

  2. Silverlight & Blend动画设计系列十一：沿路径动画（Animation Along a Path）

    Silverlight 提供一个好的动画基础,但缺少一种方便的方法沿任意几何路径对象进行动画处理.在Windows Presentation Foundation中提供了动画处理类DoubleAnim ...

  3. 2016集训测试赛（二十一）Problem C: 虫子

    题目大意 给你一棵树, 每个点有一个点权. 有两种操作: link / cut 修改某个点的点权 每次操作后, 你要输出以下答案: 在整棵树中任意选两个点, 这两个点的LCA的期望权值. Soluti ...

  4. 2016北京集训测试赛（十一）Problem C: 树链问题

    Solution 智障暴力题, 每个点维护一下子树信息, 树剖就好了. 我居然还傻了写了一发毛毛虫... #include <cstdio> #include <cctype> ...

  5. 2016.3.14__CSS 定位__第六天

    假设您认为这篇文章还不错.能够去H5专题介绍中查看很多其它相关文章. CSS 定位机制 CSS中一共同拥有三种基本定位机制:普通流.浮动.绝对定位. 假设不进行专门指定.全部的标签都在普通流中定位. ...

  6. [转]ANDROID L——Material Design详解（动画篇）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...

  7. ANDROID L——Material Design具体解释（动画篇）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  8. 用Unreal Engine绘制实时CG影像

    转自:http://www.unrealchina.net/portal.php?mod=view&aid=225 近年来,对实时CG的关心热度越来越高,但要想弥补与预渲染方式的差异并不是那么 ...

  9. Cocos2d-x视频教程

    目录 1. 我的技术专栏 2. 相关推荐 3. 下载链接 4. cocos2d-xx Lua+JS+C++教学视频 5. 杨丰盛Cocos2D-X游戏课程 6. [Cocos2d-x]塔防游戏开发实战 ...

随机推荐

  1. Vue.js—组件快速入门以及实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  2. 几种移动app API调用认证方案浅析

    最近做的金融项目,app调用的接口需要做一个身份认证,所以找了下目前API services验证的几种方式.之前翻译的一篇文章--[译]移动API安全终极指南中,主要提出了API服务调用验证的问题,通 ...

  3. EM 算法求解高斯混合模型python实现

    注:本文是对<统计学习方法>EM算法的一个简单总结. 1. 什么是EM算法? 引用书上的话: 概率模型有时既含有观测变量,又含有隐变量或者潜在变量.如果概率模型的变量都是观测变量,可以直接 ...

  4. 71、django之Ajax续

    接上篇随笔.继续介绍ajax的使用. 上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html 本篇导航: Ajax响应参数 csrf 跨站请求伪造 ...

  5. Spring ioc与aop的理解

    一 spring的特点 1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易 ...

  6. "MySql.Data.MySqIClient.MySqlProviderSevices”违反了继承安全 性规则。派生类型必须与基类型的安全可访问性匹配或者比基类型的安 全可访问性低。 "解决方法

    写Code First 时(使用的是MySql数据库),添加好EntityFrame.MySql.Data .MySql.Data.Entity后 ,写好TestDbContext类. 运行时报出一个 ...

  7. javascript常用的Math对象的方法

    简介 Math对象是在程序编程中用于执行一些数学任务的.Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数, ...

  8. python实战===如何优雅的打飞机

    这是一个打飞机的游戏,结构如下: 其中images中包含的素材为 命名为alien.png    命名为ship.png 游戏效果运行是这样的: 敌军,也就是体型稍微大点的,在上方左右移动,并且有规律 ...

  9. C语言之循环次数

    #include<stdio.h>int main(){int num,count=0,i=0,ret=0;scanf("%d",&num);while(num ...

  10. gdb的多线程调试

    info threads 可以查看当前进程有哪些线程 thread ID 可以切换到线程ID bt 查看当前线程堆栈 set scheduler-locking on多线程调试过程中, 线程会来回切换 ...