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

如下动画，常用于手机端，提示用户往下拖动的渐隐渐出效果。

Demo

关键CSS代码

1. 给相应的DIV层，定义动画的名称(mymove)、花费时间(1.6s)、播放次数(infinite)

 animation:mymove 1.6s infinite;

 -moz-animation:mymove 1.6s infinite; /* Firefox */

 -webkit-animation:mymove 1.6s infinite; /* Safari and Chrome */

 -o-animation:mymove 1.6s infinite; /* Opera */

2. 设置@keyframes

 @-webkit-keyframes mymove {

 0%,30% {opacity: 0;-webkit-transform: translate(0,-10px);}

 60% {opacity: 1;-webkit-transform: translate(0,0);}

 100% {opacity: 0;-webkit-transform: translate(0,10px);}

 }

 @-moz-keyframes mymove {

 0%,30% {opacity: 0;-moz-transform: translate(0,-10px);}

 60% {opacity: 1;-moz-transform: translate(0,0);}

 100% {opacity: 0;-moz-transform: translate(0,10px);}

 }

 @keyframes mymove {

 0%,30% {opacity: 0;transform: translate(0,-10px);}

 60% {opacity: 1;transform: translate(0,0);}

 100% {opacity: 0;transform: translate(0,10px);}

 }

完整代码(点击展开)

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>CSS Animater</title>

 <style>

 .container{

     width:625px;

     height:204px;

     border:1px solid #ccc;

     position:relative;

 }

 .start{

     position:absolute;

     left:50%;

     top:50%;

     margin-left:-25px;

     margin-top:-24px;

     width:50px;

     height:48px;

 animation:mymove 1.6s infinite;

 -moz-animation:mymove 1.6s infinite; /* Firefox */

 -webkit-animation:mymove 1.6s infinite; /* Safari and Chrome */

 -o-animation:mymove 1.6s infinite; /* Opera */

 }

 @-webkit-keyframes mymove {

 0%,30% {opacity: 0;-webkit-transform: translate(0,-10px);}

 60% {opacity: 1;-webkit-transform: translate(0,0);}

 100% {opacity: 0;-webkit-transform: translate(0,10px);}

 }

 @-moz-keyframes mymove {

 0%,30% {opacity: 0;-moz-transform: translate(0,-10px);}

 60% {opacity: 1;-moz-transform: translate(0,0);}

 100% {opacity: 0;-moz-transform: translate(0,10px);}

 }

 @keyframes mymove {

 0%,30% {opacity: 0;transform: translate(0,-10px);}

 60% {opacity: 1;transform: translate(0,0);}

 100% {opacity: 0;transform: translate(0,10px);}

 }

 </style>

 </head>

 <body>

 <div class="container">

  <a class="start"><img src="data:images/arrow.png" /></a>

 </div>

 </body>

 </html>

CSS3 动画 @keyframes的更多相关文章

  1. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  2. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  3. Less 创建css3动画@keyframes函数

    封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @ ...

  4. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

  5. css3动画@keyframes示例

    .active { animation: chuiziza 0.5s ease 1 forwards; } .feijindan { display: block; animation: fei 2s ...

  6. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  7. css3动画基础详解（@keyframes和animation）

    我们经常会看到CSS3能制作出很炫酷的动画效果,但是自己却只能做一些简单的.原因是对CSS3动画只知其一,不知其二.最近正好有做动画的项目,于是花时间将css3动画做了一个探究之旅,记录在册. 动画是 ...

  8. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  9. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

随机推荐

  1. HDU 2815 扩展baby step giant step 算法

    题目大意就是求 a^x = b(mod c) 中的x 用一般的baby step giant step 算法会超时 这里参考的是http://hi.baidu.com/aekdycoin/item/2 ...

  2. hdu 4465 求期望（C（m,n）太大用log优化）

    /* 坑啊 数学函数的运用log处理,exp还原 tle好长时间,一直用g++交,最后把别人正确的代码交上也是tle,用c++交一遍ac 题意:有两个数量为n的糖果,一个人开始吃,吃到最后有一堆剩余为 ...

  3. MTK平台释疑android M 配置中断相关问题

    1.使用老方法(android L)配置中断,调用request_irq函数时出错,错误代码 -22  Dear Customer: 您好! 如电话沟通,贵司可以在发过来的code基础上做下面的修改再 ...

  4. [NOIP2008] 提高组 洛谷P1125 笨小猴

    题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设maxn是单词中出现次数最 ...

  5. 到达时间自动点击按钮弹出提示并跳转【JavaScript实现】

    原文发布时间为:2008-10-11 -- 来源于本人的百度文章 [由搬家工具导入] 其实我本来是想 做 在线考试的时候 规定时间到达时候自动交卷的，就想到这个例子了。。。。 代码： <html ...

  6. msp430入门编程03

    msp430的C标识符和关键字 msp430入门学习 msp430入门编程

  7. idea中javaweb的mysql8.0.15配置问题

    mysql8.0.x以后的版本在连接数据库的时候有些不同. 首先: Class.forName("com.mysql.cj.jdbc.Driver"); 其次: DriverMan ...

  8. Spring boot精要

    1.自动配置:针对很多Spring应用程序的常见应用功能,SpringBoot能自动提供相关配置: 2.起步依赖:告诉SpringBoot需要什么功能,他就能引入需要的库: 3.命令行界面:这是Spr ...

  9. linux网络编程中的shutdown()与close()函数

    1.close()函数 int close(int sockfd); //返回成功为0,出错为-1 close 一个套接字的默认行为是把套接字标记为已关闭,然后立即返回到调用进程,该套接字不能再由cl ...

  10. android 深入浅出 群内“每日一问” 问答总结

    永远不变的就是变. 俗话说的好,环境改变人生. 常常面对的是一群积极奋进的人,那么你的心态和生活也会变的充满斗志.青春在于折腾,趁我们还年轻,拿出你的激情.踏着泪水载着梦,才干拥有自己的一片天空. 上 ...