CSS3的出现 让我们通过css样式也能写出炫酷的特效

通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果

DEMO：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             width: 200px;

             height: 200px;

             background: #008aff;

             position: absolute;

             -webkit-animation:aname 10s;

             -o-animation:aname 10s;

             animation:aname 10s;

         }

         @keyframes aname {

             0%{top:0px;left: 0px;}

             30%{top:0px;left: 500px;}

             60%{top:500px;left: 0px;}

             100%{top:0px;left: 0px;}

         }

     </style>

 </head>

 <body>

     <div></div>

 </body>

 </html>

这段代码演示的是一个蓝色的正方形div在10秒内移动的过程

首先 我们用animation这个属性 声明了一个名称 aname 在这个名称的后面10s是指定这个动画的运行时长为10秒

为什么要写三个animation属性 这三个animation代表着为css3的不同浏览器进行兼容

前缀 -o- 代表着 opera 内核的浏览器

前缀 -webkit- 代表着拥有webkit内核的浏览器 如 Chrome 搜狗浏览器 猎豹浏览器

@keyframes aname(动画名) 这个样式是执行动画用的 它是写在div外面的

@keyframes 内部的 0%{} 是规定动画在运行时长的百分比状态

也就是0%的时候我规定了它的坐标top和left都是0px

当然 还有其他的动画属性

播放的次数 animation-iteration-count

可以写数字也可以写infinite代表无限次

动画的播放曲线 animation-timing-function

默认值 linear 无变化

ease 开始快 结束慢

ease-in  动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束

cubic-bezier(参数,参数,参数，参数) 写自己的参数 0到1规定速度

如果不是时间很长的动画 以上并不会有太大的不同

是否逆行播放 animation-direction 默认值 normal 逆行 alternate

是否暂停动画 animation-play-state 默认值 running 暂停 paused

动画何时开启 animation-delay 数字加s

当然以上的所有属性可以简写成这样

animation: aname 5s linear 2s infinite alternate;

CSS3之动画Animation特效的更多相关文章

  1. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

  2. css3中动画animation的应用

    <!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  5. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  7. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

随机推荐

  1. MSSQL 清空日志 删除日志文件

    MSSQL 清空日志 删除日志文件 最近的项目主要做数据的归档,把数据从一个数据库拉到另一个数据库,照成新数据库的日志文件非常大:于是想把日志文件删除.最简单就是先分离数据库->删除日志文件-& ...

  2. gsoap：实现线程池处理时获取到客户端的ip

    问题: 在使用线程池处理客户端请求时发现不能获取到客户端的ip! 原因:     由于在server_loop注循环中只把连接字sock加到queue队列中,并没有客户端IP,所以每一次queue回调 ...

  3. Android 短信模块分析(二) MMS中四大组件核心功能详解

    接下来的分析先从MMS中四大组件(Activity ,BroadCastReceiver,Service,ContentProvider),也是MMS中最核心的部分入手: 一. Activity  1 ...

  4. 权限开发 spring security 3.0.7 序列1 数据库脚本

    spring  security  3 细粒度权限控制第一篇,关于权限的初始化测试数据库脚本. 空间脚本: drop user FrameworkTest cascade; drop tablespa ...

  5. php从命令行中接收参数

    php一直都是作为服务器编程的主要角色,其实php也可已做脚本,比如从命令行中接收一些参数,下面就简单介绍一下如何从命令行中接收参数 代码如下: <?php var_dump($argv); ? ...

  6. tensorflow与kubernetes/docker结合使用实践

    tensorflow tensorflow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流 ...

  7. C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息二

    前言 这一篇实现snsapi_userinfo,写这篇时其实我是有疑惑的,因为我并没有调试成功,但是我反复检查程序和思路是没有问题的,因为我使用的测试公众号,群里一个伙计说他之前调试时用的也是测试公众 ...

  8. Python高手之路【十三】socket网络编程

    什么是客户/服务器架构? 什么是客户/服务器架构?不同的人有不同的答案.这要看你问的是什么人,以及指的是软件系统还是硬件系统了.但是,有一点是共通的:服务器是一个软件或硬件,用于提供客户需要的&quo ...

  9. Float 的那些事

    css float 定义元素浮动到左侧或者右侧.其出现的本意是让文字环绕图片而已. left.right.inherit(从父级元素获取float值).none 一.浮动的性质 1. 包裹性 disp ...

  10. select的onchange事件获取不了option的value

    一,select的onchange事件获取不了option的value是当你使用JQ($("#xxx").val())方法的获取的值一直提示undefined 二,解决方法: va ...