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. spring4注解配置datasource方式

    package com.boot.config; import org.springframework.context.annotation.AnnotationConfigApplicationCo ...

  2. centos7下安装nginx

    1.yum install epel-release(安装epel(Extra Packages for Enterprise Linux)) 2.yum repolist(确保epel添加到yum的 ...

  3. django-枚举类型扩展方法

    原文地址:https://docs.djangoproject.com/en/dev/ref/models/instances/#django.db.models.Model.get_FOO_disp ...

  4. 关于定时器setTimeout()方法的实践--巧解bug

    _使用开发环境:UAP:_ _框架:JQuery.MX:_ 最近的开发的页面中,有一处需要在提交的 datagrid里启用行编辑,就会发生奇怪的bug,编辑过程中如图所示不移开焦点直接点保存,那么已输 ...

  5. edgedb 内部pg 数据存储的探索 (五) 运行进程列表信息

    做为一个简单的记录,方便后期分析学习 当前包含了一个timescale 的extension 可以不用关注 信息 ps -ef |grep edgedb edgedb 10559 24858 0 4月 ...

  6. Linux下的常用文本编辑器

    Linux的文本编辑器 ed 在早期的unix平台上,ed可以说是唯一的编辑工具.它是一个很古老的行编辑器,vi这些编辑器都是从ed 演化而来.行编辑器使用起来很不方便,每次只能对一行进行操作,.而后 ...

  7. C#编程时应注意的性能处理

    GC堆回收 那么除了通过new对象而达到代的阈(临界)值时,还有什么能够导致垃圾堆进行垃圾回收呢? 还可能windows报告内存不足.CLR卸载AppDomain.CLR关闭等其它特殊情况. 或者,我 ...

  8. Spark配置参数详解

    以下是整理的Spark中的一些配置参数,官方文档请参考Spark Configuration. Spark提供三个位置用来配置系统: Spark属性:控制大部分的应用程序参数,可以用SparkConf ...

  9. 带查询参数 可分页 的 T-SQL 语句写法

    ) DECLARE @pageindex int DECLARE @pagesize int DECLARE @classid int set @keys = '' ; ; ; with temptb ...

  10. h5需要的浏览器插件

    google浏览器插件: web前段助手.vue-tools.草料二维码