CSS3，我们可以创建动画，它可以取代许多网页动画图像，例如下面这个小球动画

使用css3关键帧动画可以轻松实现

请看下面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>关键帧动画</title>

</head>

<style type="text/css">

@keyframes move {

    10%{

        transform: translate(50px,50px)

    }

    30%{

        transform: translate(150px,150px) scale(1.5);

    }

    50%{

        transform: translate(250px,150px) scale(1);

    }

    70%{

        transform: translate(350px,250px) scale(2);

    }

    100%{

        transform: translate(0px,0px) scale(1);

    }

}

@-webkit-keyframes move {

    10%{

        -webkit-transform: translate(50px,50px)

    }

    30%{

        -webkit-transform: translate(150px,150px) scale(1.5)

    }

    50%{

        -webkit-transform: translate(250px,150px) scale(1)

    }

    70%{

        -webkit-transform: translate(350px,250px) scale(2)

    }

    100%{

        -webkit-transform: translate(0px,0px) scale(1)

    }

}

.box{

    width: 30px;

    height: 30px;

    background-color: pink;

    border-radius: 50%;

    /* 规定 @keyframes 动画的名称 */

    animation-name:move;

    -webkit-animation-name:move;

    -o-animation-name:move;

    -ms-animation-name:move;

    -moz-animation-name:move;

    /* 规定动画完成一个周期所花费的秒 默认是 0 */

    animation-duration:1s;

    -webkit-animation-duration:1s;

    -o-animation-duration:1s;

    -ms-animation-duration:1s;

    -moz-animation-duration:1s;

    /* 规定动画的速度曲线。默认是 "ease" */

    animation-timing-function: linear;

    -webkit-animation-timing-function: linear;

    -o-animation-timing-function: linear;

    -ms-animation-timing-function: linear;

    -moz-animation-timing-function: linear;

    /* 规定动画何时开始。默认是 0 */

    animation-delay: 0;

    -webkit-animation-delay: 0;

    -o-animation-delay: 0;

    -ms-animation-delay: 0;

    -moz-animation-delay: 0;

    /* 规定动画被播放的次数。默认是 1 */

    animation-iteration-count: infinite;

    -webkit-animation-iteration-count: infinite;

    -o-animation-iteration-count: infinite;

    -ms-animation-iteration-count: infinite;

    -moz-animation-iteration-count: infinite;

}

</style>

<body>

    <div class="box"></div>

</body>

</html>

动画类型不仅仅局限于 translate（平移） 还可以是 scale（缩放）rotate（旋转）等

css3 实现动画的更多相关文章

  1. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  2. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  3. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  4. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  5. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  6. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  7. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  8. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  9. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  10. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

随机推荐

  1. Python 找零问题

    #coding = utf-8 def Change_Money(money): print('总金额:'+str(money)+'元') loop=True tmp=[] # 面值列表 单位:元 t ...

  2. nexus 数据库备份任务webhook 通知-另外一种方法

    使用benthos 做为webhook,是一种方法,功能很强大,但是有点复杂,所以换了一个更简单直接的webhook 工具 根据请求的数据,只处理关于db exporter 任务部分的消息,然后就是调 ...

  3. 鏈接Redis報錯`AUTH` failed: ERR Client sent AUTH, but no password is set [tcp://127.0.0.1:6379]

    問題 鏈接Redis報錯`AUTH` failed: ERR Client sent AUTH, but no password is set [tcp://127.0.0.1:6379] 解決 啟動 ...

  4. Creating Excel files with Python and XlsxWriter——Introduction

    XlsxWriter 是用来写Excel2007版本以上的xlsx文件的Python模块. XlsxWriter 在供选择的可以写Excel的Python模块中有自己的优缺点. #---------- ...

  5. Django的安装和启动以及第一个工程的建立

    ---恢复内容开始--- 前提:已经安装了python和Anaconda (windows系统) 在Anaconda安装好之后,其文件夹下有一个叫做Anaconda Prompt的工具,类似windo ...

  6. 移动端css水平垂直居中

    水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. <div class="box"> <div class="conte ...

  7. Opencv 图像读取与保存问题

    转自 @yhl_leo 1 图像读取 首先看一下,imread函数的声明: // C++: Mat based Mat imread( ); // C: IplImage based IplImage ...

  8. ionic3使用@angular/http 访问nodejs（koa2框架）服务不能返回数据

    cordova的http插件不能使用在browser上,所以当需要在browser上浏览时,需要使用@angular/http 里的方法来访问nodejs服务. 如果出现服务端能够接收请求并相应,而客 ...

  9. TypeScript安装备忘：npm proxy设置

    如果使用了代理网络,因为npm无法自动识别Internet代理,则需要手动设置npm代理才能下载包. 设置命令:    npm config set proxy http://proxyhost:pr ...

  10. HTML5 新的 Input 类型

    Input 类型: color(拾色器) color 类型用在input字段主要用于选取颜色,如下所示: 支持浏览器 实例 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type= ...