通过 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. Vue如何mock数据模拟Ajax请求

    我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...

  2. C51 中断 个人笔记

    总架构图 IE寄存器 控制各个中断源的屏蔽与允许 TCON寄存器 各个中断源的请求标志位&有效信号的规定 中断源及其优先级 中断号写程序的时候要用 CPU处理中断三原则 1.CPU同时接收到几 ...

  3. 1001. A+B Format (20) （%0nd）

    1001. A+B Format (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Calculate ...

  4. CodeForces788B 欧拉路

    B. Weird journey time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  5. DRF JWT的用法 & Django的自定义认证类 & DRF 缓存

    JWT 相关信息可参考: https://www.jianshu.com/p/576dbf44b2ae DRF JWT 的使用方法: 1. 安装 DRF JWT # pip install djang ...

  6. 运算符、流程控制、while循环

    运算符: 1. 算术运算符: “ + ”.“ - ” .“ * ” .“ / ” 分别为加.减.乘.除. # % 是“取模运算符”,就是返回除法的余数.eg. a = 3, b=5, b % a 就是 ...

  7. MVC Ajax.BeginForm重复提交解决方法

    mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles ...

  8. [NOIP2007] 提高组 洛谷P1005 矩阵取数游戏

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...

  9. 2015山东信息学夏令营 Day4T3 生产

    2015山东信息学夏令营 Day4T3 生产 [题目描述] 工厂为了生产一种复杂的产品,给各个生产部门制定了详细的生产计划.那么,就经常会有生产部门要把产品送到另一个生产部门作为原料.这是一个注重产品 ...

  10. Java这样学，Offer随便拿，学习方法和面试经验分享

    Java这样学,Offer随便拿,学习方法和面试经验分享 学习中:https://mp.weixin.qq.com/s/iSutLzqCiPMWwm_Rm_2oPw