通过 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. docsearch & algolia

    docsearch & algolia The easiest way to add search to your documentation. https://community.algol ...

  2. hdu 5073 推公式相邻质心转换

    #include<stdio.h> #include<stdlib.h> #include<string.h> #define N 51000 int cmp(co ...

  3. hdu 1075

    #include<stdio.h> #include<string.h> #include<string> #include<iostream> #in ...

  4. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  5. [bzoj1430]小猴打架_prufer序列

    小猴打架 bzoj-1430 题目大意:题目链接. 注释:略. 想法: 我们发现打架的情况就是一棵树. 我们只需要把确定树的形态然后乘以$(n-1)!$表示生成这棵树时边的顺序. 一共$n$个节点我们 ...

  6. HDU——1498 50 years, 50 colors

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  7. P1614 爱与愁的心痛

    洛谷——P1614 爱与愁的心痛 题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第一章 <我为歌狂>当中伍思凯神曲<舞月 ...

  8. Java并发包——使用新的方式创建线程

    Java并发包——使用新的方式创建线程 摘要:本文主要学习了如何使用Java并发包中的类创建线程. 部分内容来自以下博客: https://www.cnblogs.com/dolphin0520/p/ ...

  9. Ubuntu 16.04硬盘有坏道，开机显示blk_update_request:I/0 error

    可以尝试以下方式解决: 1.检查坏道(效果明显,但是比较慢,检查出来并没有什么用,只是知道有坏块) sudo badblocks -s -v -o /root/bb.log /dev/sda1 2.快 ...

  10. spring 数据源JNDI 基于tomcat mysql配置

    关键代码 <bean id="dataSource" class="org.springframework.jndi.JndiObjectFactoryBean&q ...