CSS3动画分为二部份：

1、定义动画行为：

使用@keyframes定义动画行为，有两种方式：

方式一：仅定义动画起始样式，与动画结束样式

 @keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-moz-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-webkit-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-o-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

方式二：定义动画进展中的每步样式，百分比表示动画执行的进度百分值

 @keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-moz-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-webkit-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-o-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

2、定义动画执行方式。

将动画的行为附加到元素上，使其按照此规则执行动画效果，但我们还要给动画设定执行方式，比如什么动画让它多长时间完成，是否循环执行动画等。

动画执行方式语法：

 animation: name duration timing-function delay iteration-count direction;

语法中译：

 animation:

     动画行为名称，在keyframes内定义的名称

     动画周期，比如 5s 表示5秒完成此动画一次

     动画的速度曲线， linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

     动画何时开始，默认值0，立刻播放

     动画被播放的次数，默认值1，值infinite 表示一直循环播放

     动画是否在下一周期逆向地播放，可选值：  normal（默认，不逆向地播放）  | alternate（动画应该轮流反向播放）

3、可以通过增加CSS样式：animation-play-state 来控制CSS3动画暂停与播放

 animation-play-state: paused | running;

 -webkit-animation-play-state: paused | running ;

代码演示:

 <!DOCTYPE html>

 <html lang="zh-cmn-Hans">

 <head>

 <meta charset="utf-8">

 <style>

     a{width:100px;height:30px;display:block;}

     @keyframes myan{

         0%    {background:#066;left:20px;top:20px;}

         50% {background:#090;left:100px;top:100px;}

         100% {background:#093;left:300px; top:300px;}

     }

     #a{

         position:absolute;

         animation: myan 5s linear 2s infinite  alternate;

     }

     #a:hover{

           /* 这里使动画停止了 */

         animation-play-state:paused;

       }

 </style>

 </head>

 <body>

 <div style="position:relative;margin:50px;width:100px;height:100px;background:#ccc;">

     <a href="#" id="a">1111111</a>

     </div>

 </body>

 </html>

CSS3 ：animation 动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  5. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  6. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  7. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  8. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  9. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. json 二进制传输方案

    json 传输二进制数组方案 json 是一种很简洁的协议,但可惜的是,它只能传递基本的数型(int,long,string等),但不能传递byte类型.如果想要传输图片等二进制文件的话,是没办法直接 ...

  2. HDU 1258 Sum It Up（dfs 巧妙去重）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1258 Sum It Up Time Limit: 2000/1000 MS (Java/Others) ...

  3. android ListView 与GridView 学习总结(五)

    ListView的使用总结 基本使用:   步骤:在布局文件中定义一个ListView控件-在活动中获得ListView的实例-获得适配器adapter的实例并且传入三个参数-把适配器对象传递给lis ...

  4. Unity 游戏框架搭建 (十二) 简易AssetBundle打包工具(二)

    上篇文章中实现了基本的打包功能,在这篇我们来解决不同平台打AB包的问题. 本篇文章的核心api还是: BuildPipeline.BuildAssetBundles (outPath, 0, Edit ...

  5. 使用第三方《UITableView+FDTemplateLayoutCell》自动计算UITableViewCell高度（Masonry约束）

    直接上代码: 1:先自定义cell .h文件中 #import <UIKit/UIKit.h> #import "LBDNewMsgListModel.h" #impo ...

  6. Webpack4 学习笔记七 跨域服务代理

    webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Web ...

  7. 编写可维护的JavaScript之编程风格

    在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码. 1. 层级缩进 对于层级缩进目前有两种主张:1)使用制表符这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合 ...

  8. layDate 闪现 循环一个以上会闪现

    一个render一次渲染一个日期组件,这个是内置的,所以需要循环绑定, 又不能确定页面有多少个,还好layDate 提供了内置方法, //同时绑定多个 lay('.test-item').each(f ...

  9. Linux centos7 安装python3 及 GCC

    1.用wget下载python源码 PYTHON下载 找适合自己的版本,我下载的是3.7.2 2.用tar命令解压下载的文件 tar -zxvf Python-3.7.2.tgz 3.进入目录解压后的 ...

  10. 【c学习-14】

    /*练习*/ #include int testFeiunction(b[],n){ b[1]=1; n=10; } int main(){ int a[10]={1,2,3,4,5}; int n= ...