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. [USACO06JAN]树林The Grove

    树木(grove)Time Limit: 1Sec Memory Limit: 64 MB[Description]牧场里有一片树林,林子里没有坑．贝茜很想知道,最少需要多少步能围绕树林走一圈,最后回 ...

  2. smart contract 知识点

    知识点 memory vs storage vs stack storage , where all the contract state variables reside. Every contra ...

  3. 家人的健康和offer的取舍

    记得2月份去Amazon面试的时候,小孩子正莫名的发烧,已经破纪录的连续烧了4天,到了6点面试完毕,面试官还试探性的问我还有没有什么要聊的,当时确实是没了心情,就想着回家看小病人,在回家的路上,暗暗的 ...

  4. Spark开发环境搭建（IDEA、Scala、SVN、SBT）

    软件版本 软件信息 软件名称 版本 下载地址 备注 Java 1.8 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-dow ...

  5. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  6. Go 常用命令

    Go 常用命令 含义 go run file_name.go

  7. delphi 多线程之System.TMonitor

    三天不写代码就手生! 把测试代码记录下来. unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, S ...

  8. Windows Server 2008 R2 /2012 修改密码策略

    今天建了域环境,在添加新用户的时候,发现用简单的密码时域安全策略提示密码复杂度不够,于是我就想在域安全策略里面把密码复杂度降低一点. 问题:    在“管理工具 >> 本地安全策略 > ...

  9. SQL数据库日志清理

    USE [master] GO ALTER DATABASE HCPM_01_181230 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE HCP ...

  10. what is MAC address

    MAC Address:media access control address A media access control address (MAC address) is a unique id ...