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. 【luogu P3884 [JLOI2009]二叉树问题】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3884 对方不想和你说话并向你扔了一个lca模板. #include <cstdio> #incl ...

  2. ISIS Scanner Errors codes

    This section lists errors sorted by number: Error # Defined Constant String Defined In PIXDFLT 0 PIX ...

  3. 关于ProjectServer定制化项目中心页面

    ProjectServer界面很多客户接受不了,随便用户可以根据自己需要展示页面,但大多数国内用户喜欢确定的样式,我就是要这样的页面,不要个人定制. 那只有自己再做一个项目中心的webpart嵌入,对 ...

  4. Spring知识点总结(三)之Spring DI

    1. IOC(DI) - 控制反转(依赖注入) 所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管理过程交由Spring框架来处理,从此在开发过程中不再需要关注对象的创建和 ...

  5. Struts2 第五讲 -- Struts2与Servlet的API解耦

    为了避免与 Servlet API 耦合在一起, 方便 Action 做单元测试, Struts2 对 HttpServletRequest, HttpSession 和 ServletContext ...

  6. [HP-UNIX]bdf命令总结

    (1)bdf命令的效果 lijiaman$[/home/oracle]bdf Filesystem kbytes used avail %used Mounted on /dev/vg00/lvol3 ...

  7. Windows远程桌面连接命令mstsc

    常用的:1. mstsc /v: 192.168.0.1 连接数满了之后使用的:2. mstsc /v: 192.168.0.1 /console -admin Mstsc 命令参考Updated: ...

  8. Struts2知识点小结(二)

    一.结果视图的配置    <result name="success">/success.jsp</result>        1.局部结果视图      ...

  9. Navicat for Mysql修改MySQL数据库密码，图文详解

    1.创建一个连接 2.打开连接 3.按照图示123依次点击 4.输入新密码 5.查看实现修改密码功能的SQL语句(此步骤非必须) 6.最关键的一步:点击保存 7.出现如下现象,恭喜你,修改密码成功! ...

  10. jquery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...