通过 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. Java字符拼成图片（image-ASCII）

    目录 背景 代码思路 难点讲解 如何得到rgb 如何让不同颜色匹配不同字符 为什么我的图片只能打一半 OutOfMemoryError错误 为什么用汉字来打印图案会扭曲 装逼时刻 @(Java字符图片 ...

  2. hive 删除表内容

    TRUNCATE:truncate用于删除所有的行,这个行为在hive元存储删除数据是不可逆的delect:用于删除特定行条件,你可以从给定表中删除所有的行insert overwrite table ...

  3. STM32F407 开发环境搭建 程序下载 个人笔记

    详细资料: http://www.openedv.com/thread-13912-1-1.html 需要安装的软件: 1.keil(MDK,必选),用keygen破解 2.CH340驱动,(usb串 ...

  4. [OJ#39]左手右手

    [OJ#39]左手右手 试题描述 有 n 个人,每个人左右手上各写着一个整数.对于编号为 a 的人和编号为 b 的人, a 对 b 的好感度等于 a 左手上写的数字乘 b 右手上写的数字,a 和 b  ...

  5. BBS+Blog项目流程及补充知识点

    项目流程: 1. 产品需求 (1)基于用户认证组件和Ajax实现登陆验证(图片验证码) (2)基于forms组件和Ajax实现注册功能 (3)设计系统首页(文章列表渲染) (4)设计个人站点页面 (5 ...

  6. android 实现照相功能 照片存放在SID卡中，将照片显示在Image中

    protected static final int CAMERA_RESULT = 0; private String fileName; private Button takePhotoBn; p ...

  7. 执行循环任务new Timer().schedule(new TimerTask(){},0,1000);

    package com.pingyijinren.test; import android.support.v7.app.AppCompatActivity; import android.os.Bu ...

  8. 斯特林(Stirling)公式 求大数阶乘的位数

    我们知道整数n的位数的计算方法为:log10(n)+1n!=10^m故n!的位数为 m = log10(n!)+1 lgN!=lg1+lg2+lg3+lg4+lg5+................. ...

  9. Same Tree (二叉树DFS)

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  10. 调整JVM内存大小

    首次运行公司项目,出现了内存溢出,具体出现java.lang.OutOfMemoryError: PermGen space和java.lang.OutOfMemoryError:GC overhea ...