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. 谈一谈socket与java

    用java中socket实现socket聊天 1,      什么是socket Socket 是指网络套接字,什么是套接字呢?    这是网络上一种端对端的网络协议,端口就是进程号,socket在网 ...

  2. RXJS 实例操作符

    先来了解几个新名词: Observable : 可观察对象,是一组值或事件的集合 Observer : 观察者,回调函数集合 Subscription :Observable动作执行者 Operato ...

  3. C++跨平台集成websocketpp

    之前给公司写了一个用于消息交互的服务器,移植到Linux上之后发现H5-Websocket模块经常出问题,而该模块是另一位已经离职同事编写的,所以修改和维护都存在一定的困难,索性就直接把这个模块替换掉 ...

  4. face_recognition

    人脸定位import face_recognition image = face_recognition.load_image_file("your_file.jpg") face ...

  5. vue中父组件给子组件额外添加参数

    1 子组件: this.$emit('callbackone',item.parentId) 2 父组件: @callbackone="callbackone($event,index)&q ...

  6. Yii2 设计模式——工厂方法模式

    工厂方法模式 模式定义 工厂方法模式(Factory Method Pattern)定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类吧实例化推迟到子类. 什么意思?说起来有这么 ...

  7. Base64字符 转图片乱码问题

    网站做了个随机验证码图片功能,遇到了一个奇怪的问题——Base64字符集转图片乱码问题,问题描述如下 1.用java画笔将随机验证码绘制成图片 2.再将图片的二进制代码转换成Base64字符集,返回给 ...

  8. httpd日志格式

    日志的缺省格式有如下几种: LogFormat "%h %l %u %t "%r" %>s %b "%{Referer}i" "%{U ...

  9. Verilog编码规范与时序收敛

    Verilog编码规范与时序收敛 没有优先级的时候,尽量用case 时钟选择

  10. LAB1 partIII

    partIII 实现 分发MapReduce 任务,实现 schedule() 方法在 mapreduce/schedule.go. schedule()函数的职责是把任务分给可用的worker. s ...