最近一直苦恼做一个banner的进度条，原先用js改变width值，但明显卡顿。后来用了animation，超级好用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    .rotation {

        animation: rotation 8s linear;

        width: 50px;

        background:red;

        height:2px;

    }

    @keyframes rotation {

        % {

            transform: translateX() ;

        }

        % {

            transform: translateX(50px) ;

        }

    }

</style>

<body>

<div class="rotation">

</div>

</body>

</html>

animation动画案例的更多相关文章

  1. 写多个物件css3循环动画案例原理

    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...

  2. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  3. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

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

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

  5. Android Property Animation动画

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  6. android Animation 动画绘制逻辑

    参考:http://www.jianshu.com/p/3683a69c38ea 1.View.draw(Canvas) 其中步骤为:/* * Draw traversal performs seve ...

  7. 转 iOS Core Animation 动画 入门学习（一）基础

    iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...

  8. css3 animation动画技巧

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

  9. 【Android 基础】Animation 动画介绍和实现

    在前面PopupWindow 实现显示仿腾讯新闻底部弹出菜单有用到Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animati ...

随机推荐

  1. WinServer配置MySQL主从同步

    为什么要配置主从同步? 如果一台数据库服务器挂了,还有一个备用 为了方便配置,我采用两台WinServer2003虚拟机: 1.前期准备工作:安装好镜像文件,VMTOOLS,MySQL5.5 我这里以 ...

  2. python将字符串类型list转换成list

    python读取了一个list是字符串形式的'[11.23,23.34]',想转换成list类型: 方式一: import ast str_list = "[11.23,23.34]&quo ...

  3. qml demo分析(samegame-拼图游戏)

    一.效果展示 相信大家都玩儿过连连看游戏,而且此款游戏也是闲时一款打发时间的趣事,那么接下来我将分析一款类似的游戏,完全使用qml编写界面,复杂逻辑使用js完成.由于此游戏包含4种游戏模式,因此本篇文 ...

  4. LogUtil【实现自由的控制日志的打印的封装类】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 主要用于控制项目开发和上线阶段日志的打印. 效果图 暂不需要. 代码分析 在LogUtil类中声明代表不同日志级别的常量值(VERB ...

  5. 五行Python代码教你用微信来控制电脑摄像头

    如果说强大的标准库奠定了Python发展的基石,丰富的第三方库则是python不断发展的保证.今天就来通过itchart库来实现通过微信对电脑的一些操作. 一.安装库 安装itchat itchat ...

  6. unity协程coroutine浅析

    转载请标明出处:http://www.cnblogs.com/zblade/ 一.序言 在unity的游戏开发中,对于异步操作,有一个避免不了的操作: 协程,以前一直理解的懵懵懂懂,最近认真充电了一下 ...

  7. 使用strace命令跟踪系统调用

    一.是什么strace? strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由 ...

  8. JDK源码分析（2）之 Array 相关

    在深入了解 Array 之前,一直以为 Array 比较简单,但是深入了解后才发现其实挺复杂的.所以我把重要的写在最前面,但凡遇到和语言本身相关的问题,都可以查阅 Java Language and ...

  9. 如何探测网络设备ACL规则

    探测网络设备ACL规则 背景:在互联网企业的生产网络中,往往在网络入口处的网络设备上会有成千上万条ACL策略,这么多的ACL导致了网络管理员很难彻底梳理清楚其中的逻辑关系,从而不知道到底对外开放了哪些 ...

  10. windows共享文件夹

    net share 查看本地共享文件夹 我们想要删除这些链接,删除所有的共享目录链接命令是: net use * /d 如果只是想删除单个共享目录的链接,那么命令是: net use \\主机名或IP ...