通过 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如何使用vee-validate表单验证

    Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery ...

  2. 怎样判断有没有SQL注入？

    最为经典的单引号判断法: 在参数后面加上单引号,比如: http://xxx/abc.php?id=1' 如果页面返回错误,则存在 Sql 注入. 原因是无论字符型还是整型都会因为单引号个数不匹配而报 ...

  3. xtu summer individual 5 D - Subsequence

    Subsequence Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID ...

  4. UVALive 6430 （水dp）

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  5. 【转载】Spring Boot【快速入门】2019.05.19

    原文出处:https://www.cnblogs.com/wmyskxz/p/9010832.html   Spring Boot 概述 Build Anything with Spring Boot ...

  6. Flink本地安装和创建Flink应用

    本篇文章首发于头条号Flink本地安装和创建Flink应用,欢迎关注我的头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech)获取更多干货,也欢迎关注 ...

  7. Spring Boot中微信全局token的缓存实现

    为什么要缓存token? 这里的token指的是微信JSAPI中基础支持的ACCESS_TOKEN,并非网页授权ACCESS_TOKEN.网页授权Token每天的调用次数没有限制,不需要缓存. 接口 ...

  8. python 【第一篇】初识python

    人生苦短,我用python Python是我喜欢的语言,简洁.优美.容易使用.所以我总是很激昂的向朋友宣传Python的好处. python起源 1989年,为了打发圣诞节假期,Guido开始写Pyt ...

  9. 南阳oj 语言入门 A+B paoblem 题目477 题目844

     A+Bproblem   题目844 两个数字翻转后相加   比方10+12 翻转后01+21=22 #include<stdio.h> int main() { int ji(in ...

  10. easyUI datagrid 前端假分页

    datagrid有两种分页方式,真分页和假分页. 所谓真分页,就是真的每次只获取一张分页的数据. 所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页. 下面具体说说假分页: 1.dat ...