animation  动画

animation-duration

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .animation_duration{

            left:10px;

            top:100px;

            position:absolute;

            -webkit-animation:.5s ease  forwards;

            -webkit-animation-duration:2s;

            -webkit-animation-name:demo;

            -moz-animation:.5s ease  forwards;

            -moz-animation-name:demo;

            -moz-animation-duration:2s;

        }

        @-webkit-keyframes demo{

            %{left:10px;}

            %{left:400px;}

        }

    </style>

</head>

<body>

<div class="demo_box animation_duration">我一共运行了2秒钟</div>

</body>

</html>

效果：

animation-name

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .animation_name{

            left:;

            top:100px;

            position:absolute;

            -webkit-animation:.5s .5s ease infinite alternate;

            -webkit-animation-name:demo;

            -moz-animation:.5s .5s ease infinite alternate;

            -moz-animation-name:demo;

        }

        @-webkit-keyframes demo{

            %{left:;}

            %{left:400px;}

        }

    </style>

</head>

<body>

<div class="demo_box animation_name">看我没事来回跑</div>

</body>

</html>

效果：

animation-timing-function

语法animation-timing-function: linear | ease | ease-in |

 ease-out | ease-in-out | step-start | step-end | 
steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) 
[, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定对象动画的持续时间 。

ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。

linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。

ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。

ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。

ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。

step-start：马上转跳到动画结束状态。

step-end：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。

steps(<number>[, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。

cubic-bezier(<number>, <number>, <number>, <number>)：特殊的立方贝塞尔曲线效果。

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo_box{

            -webkit-animation:f1 3s .5s forwards;

            -moz-animation:f1 3s .5s forwards;

            position:relative;

            left:10px;

            width:50px;

            height:50px;

            margin:10px ;

        }

        .ease{

            -webkit-animation-timing-function:ease;

            -moz-animation-timing-function:ease;

        }

        .linear{

            -webkit-animation-timing-function:linear;

            -moz-animation-timing-function:linear;

        }

        .ease-in{

            -webkit-animation-timing-function:ease-in;

            -moz-animation-timing-function:ease-in;

        }

        .ease-out{

            -webkit-animation-timing-function:ease-out;

            -moz-animation-timing-function:ease-out;

        }

        .ease-in-out{

            -webkit-animation-timing-function:ease-in-out;

            -moz-animation-timing-function:ease-in-out;

        }

        .step-start{

            -webkit-animation-timing-function:step-start;

            -moz-animation-timing-function:step-start

        }

        .step-end{

            -webkit-animation-timing-function:step-end;

            -moz-animation-timing-function:step-end;

        }

        .steps{

            -webkit-animation-timing-function:steps();

            -moz-animation-timing-function:steps()

        }

        .cubic-bezier{

            -webkit-animation-timing-function:cubic-bezier(0.52,,0.58,1.0);

            -moz-animation-timing-function:cubic-bezier(0.52,,0.58,1.0);

        }

        @-webkit-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

        @-moz-keyframes f1{

            %{left:10px;}

            %{left:500px;background:#f00}

        }

    </style>

</head>

<body>

<div class="demo_box ease">ease</div>

<div class="demo_box linear">linear</div>

<div class="demo_box ease-in">ease-in</div>

<div class="demo_box ease-out">ease-out</div>

<div class="demo_box ease-in-out">ease-in-out</div>

<div class="demo_box step-start">step-start</div>

<div class="demo_box step-end">step-end</div>

<div class="demo_box steps">steps()</div>

<div class="demo_box cubic-bezier">cubic-bezier(0.52,,0.58,1.0)</div>

</body>

</html>

效果：

animation-delay

语法

animation-delay: <time>; 指定对象动画延迟执行的时间 。

0：不延迟，立即执行。

正数：按照设置的时间延迟。

负数：设置时间前的动画将被截断

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo_box{

            -webkit-animation:f1 3s  forwards;

            -moz-animation:f1 3s  forwards;

            position:relative;

            left:10px;

            width:50px;

            height:50px;

            margin:10px ;

        }

         .no_delay {

             -webkit-animation-delay: 0s;

             -moz-animation-delay: 0s;

         }

         .delay_2s{

             -webkit-animation-delay: 2s;

             -moz-animation-delay: 2s;

         }

        .delay_-1s{

            -webkit-animation-delay:-1s;

            -moz-animation-delay:-1s;

        }

        @-webkit-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

        @-moz-keyframes f1{

            %{left:10px;}

            %{left:500px;background:#f00}

        }

    </style>

</head>

<body>

<div class="demo_box no_delay">动画立即执行</div>

<div class="demo_box delay_2s">动画延迟2秒执行</div>

<div class="demo_box delay_-1s">动画前一秒被截断</div>

</body>

</html>

效果：

animation-direction

语法

animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。

　　

normal：正常方向。

reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）

alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。

alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）

语法

animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。

normal：正常方向。

reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）

alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。

alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo_box{

            -webkit-animation:f1 2s .5s  forwards linear;

            -moz-animation:f1 2s .5s  forwards linear;

            position:relative;

            left:10px;

            width:100px;

            height:100px;

            margin:10px ;

            overflow:hidden;

        }

        .normal{

            -webkit-animation-direction:normal;

            -moz-animation-direction:normal;

        }

        .reverse{

            -webkit-animation-direction:reverse;

            -moz-animation-direction:reverse;

        }

        .alternate{

            -webkit-animation-direction:alternate;

            -moz-animation-direction:alternate;

        }

        .alternate-reverse{

            -webkit-animation-direction:alternate-reverse;

            -moz-animation-direction:alternate-reverse;

        }

        @-webkit-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

        @-moz-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

    </style>

</head>

<body>

<div class="demo_box normal">normal</div>

<div class="demo_box reverse">reverse</div>

<div class="demo_box alternate">alternate</div>

<div class="demo_box alternate-reverse">alternate-reverse</div>

</body>

</html>

效果：

animation-iteration-count

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo_box{

            -webkit-animation:f1 3s .5s  forwards linear;

            -moz-animation:f1 3s .5s  forwards linear;

            position:relative;

            left:10px;

            width:50px;

            height:50px;

            margin:10px ;

        }

        .one {

            -moz-animation-iteration-count: ;

            -webkit-animation-iteration-count: ;

        }

        .infinite{

            -moz-animation-iteration-count: infinite;

            -webkit-animation-iteration-count: infinite;

        }

        .some {

            -moz-animation-iteration-count: ,;

            -webkit-animation-iteration-count:,;

        }

        @-webkit-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

        @-moz-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

    </style>

</head>

<body>

<div class="demo_box one">动画执行1次</div>

<div class="demo_box infinite">动画执行无数次</div>

<div class="demo_box some">这个不知道</div>

</body>

</html>

效果：

animation-fill-mode

语法

animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。

none：默认值。不设置对象动画之外的状态

forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态

backwards：结束后返回动画开始时的状态

both：结束后可遵循forwards和backwards两个规则。

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo_box{

            -webkit-animation:f1 2s .5s  forwards linear;

            -moz-animation:f1 2s .5s  forwards linear;

            position:relative;

            left:10px;

            width:100px;

            height:100px;

            margin:10px ;

            overflow:hidden;

        }

        .forwards{

            -webkit-animation-fill-mode:forwards;

            -moz-animation-fill-mode:forwards;

        }

        .backwards{

            -webkit-animation-fill-mode:backwards;

            -moz-animation-fill-mode:backwards;

        }

        @-webkit-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

        @-moz-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

    </style>

</head>

<body>

<div class="demo_box forwards">我留在终点</div>

<div class="demo_box backwards">我只回到原点</div>

</body>

</html>

效果： 

animation-play-state2017-08-22

语法

animation-play-state: running | paused 检索或设置对象动画的状态。
代码实例：
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo_box{

            -webkit-animation:f1 2s .5s  linear forwards alternate;

            -moz-animation:f1 2s .5s   linear forwards alternate;

            position:relative;

            left:10px;

            width:100px;

            height:100px;

            margin:10px ;

            overflow:hidden;

        }

        .play-state:hover{

            -webkit-animation-play-state:paused;

            -moz-animation-play-state:paused;

        }

        @-webkit-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

        @-moz-keyframes f1{

            %{left:10px;}

            %{left:500px;}

        }

    </style>

</head>

<body>

<div class="demo_box play-state">鼠标移过来我就停，移走就运动，好听话哦！</div>

</body>

</html>
 
 
 

效果：

 

转载：http://isux.tencent.com/css3

16:47:48   16:47:53

css3 动画实例的更多相关文章

  1. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  2. css3动画实例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  4. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  5. CSS3 动画

      通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...

  6. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  7. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  8. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  9. CSS3动画制作的简单示例

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

随机推荐

  1. MySQL删除外键约束问题

    当我们在一个表中添加字段约束的时候: ALTER TABLE product ADD CONSTRAINT product_fk FOREIGN KEY(category_id) REFERENCES ...

  2. docker学习与应用

    概要 众所周知,Docker是当前非常火的虚拟化容器技术,对于它的优势以及使用场景网上的资料非常多,这里我推荐大家去这个网站去详细学习docker. 我这里就写一下作为一名后端开发程序员,自己学习do ...

  3. p4841 城市规划

    分析 https://www.luogu.org/blog/DRA/solution-p4841 代码(似乎附赠了一个全家桶呢) #pragma GCC optimize(2) #pragma GCC ...

  4. LeetCode 47——全排列 II

    1. 题目 2. 解答 在 LeetCode 46--全排列 中我们已经知道,全排列其实就是先确定某一个位置的元素,然后余下就是一个子问题.在那个问题中,数据没有重复,所以数据中的任意元素都可以放在最 ...

  5. 多线程实现socket编程

    服务端: server.py import threading import socket server=socket.socket() ip_port=("127.0.0.1", ...

  6. tcp中的常见定时器

    (1)超时重传定时器tcp的靠谱特性,通过确认机制,保证每一个包都被对方收到,那么什么时候需要重传呢?就是靠这个超时重传定时器,每次发送报文前都启动这个定时器,如果定时器超时之前收到了应答则关闭定时器 ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_7_HashMap存储自定义类型键值

    自定义类型做key值.必须要重写hashCode和equals方法 创建pserson类 有name个age两个成员变量.重写toString方法 key有重复,会被新的value值替换掉. key值 ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_9_字节输入流读取字节数据

    硬盘读取到内存   read值会读一个字节 a.txt里面a变成整数就是97   读取到末尾,返回-1 再读一次还是-1 读取的代码是重复的.可以使用循环去读取.while循环. 转行成char类型的 ...

  9. seaborn

    Seaborn是基于matplotlib的Python数据可视化库. 它提供了一个高级界面,用于绘制引人入胜且内容丰富的统计图形. 一  风格及调色盘 风格 1 sns.set()  模式格式 2 s ...

  10. Monte Carlo Control

    Problem of State-Value Function Similar as Policy Iteration in Model-Based Learning, Generalized Pol ...