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. 【解决】nginx 下$_SERVER['PATH_INFO'] 无法获取到内容

    Apache是模块加载文件的,默认支持$_SERVER['PATH_INFO'] : 而对于Nginx下, 是不支持PATH INFO的, 也就是它不会默认设置PATH_INFO. 而因为Nginx默 ...

  2. React 生命周期简介

       React 中组件的生命周期会经历如下三个过程:装载过程.更新过程.卸载过程. 装载过程:组件实例被创建和插入 DOM 树的过程: 更新过程:组件被重新渲染的过程: 卸载过程:组件从 DOM 树 ...

  3. 使用VMWare虚拟机打开MFC报错：不支持16位系统

    可能这个问题的比较小众,但还是提供一下自己的思路. 笔者使用的是VMWare Fusion11的版本,采用windows7sp1的虚拟机. 在打开Mac系统共享过来的VC++的MFC文件运行时报错:不 ...

  4. 芯灵思Sinlinx A33开发板boa与CGI移植

    开发平台 * 芯灵思SinlinxA33开发板 淘宝店铺: https://sinlinx.taobao.com/ 嵌入式linux 开发板交流 641395230 在嵌入式设备的管理与交互中,基于W ...

  5. c# Linq&Lambda

    0.写这个文章主要记录下常用Lambda的用法,能力有限,文中有问题的地方希望各位大神指出来谢谢!因为平时写代码的时候没有特地去用lambda,全是用一些循环,少量会用到lambda,虽然也能实现要的 ...

  6. lua 的 break

    break   ,退出最近的一层循环 return   , 一般用于函数,会直接退出所有的循环,或者判断,返回参数 ,,,} for key,value in pairs(tb) do while(t ...

  7. docker WARNING: IPv4 forwarding is disabled. 解决方法

    WARNING: IPv4 forwarding is disabled. Networking will not work. 在宿主机添加如下信息 echo net.ipv4.ip_forward= ...

  8. js获取时间戳的三种方法

    1.Date.Now() 2.new Date().getTime() 3.Date.parse(new Date()) 其中1和2是相同含义 chrome控制台键入:Date.now() ===ne ...

  9. Zabbix 3.4 服务端安装部署

    关于zabbix的安装部署官方也提供了详细的安装文档,链接如下: https://www.zabbix.com/download 选择zabbix的版本,服务器平台及使用的数据库 安装和配置zabbi ...

  10. Git-命令行-删除本地和远程分支

    命令行方式 Git Bash: 切换到要操作的项目文件夹 命令行 : $ cd <ProjectPath> 查看项目的分支们(包括本地和远程) 命令行 : $ git branch -a ...