最近一直苦恼做一个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. Windows Server 2016-客户端加域端口汇总

    简单对客户端加域端口做汇总操作,希望对大家有帮助. 之前有对服务端口做汇总,具体请参照:Windows Server 2016-Active Directory域服务端口汇总:http://blog. ...

  2. July 05th. 2018, Week 27th. Thursday

    Pleasure in the job puts perfection in the work. 乐于工作才能有完美表现. From Aristole. Do you want promotion? ...

  3. JAVA_OPTS设置

    AVA_OPTS ,顾名思义,是用来设置JVM相关运行参数的变量. JVM:JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xss512k" -se ...

  4. .NET 机器学习生态调查

    机器学习是一种允许计算机使用现有数据预测未来行为.结果和趋势的数据科学方法. 使用机器学习,计算机可以在未显式编程的情况下进行学习.机器学习的预测可以使得应用和设备更智能. 在线购物时,机器学习基于历 ...

  5. 快速构建SPA框架SalutJS--项目工程目录 三

    配置文件 在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好.html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可: <!DOCTYPE html> ...

  6. 使用whistle模拟cgi接口异常：错误码、502、慢网速、超时

    绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中.如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来安 ...

  7. 编译Xposed

    Xposed是Android平台上的有名的Hook工具,用它可以修改函数参数,函数返回值和类字段值等等,也可以用它来进行调试.Xposed有几个部分组成: 修改过的android_art,这个项目修改 ...

  8. PHP面向对象特性

    目录 创建对象 成员属性 成员方法 构造方法 析构方法 垃圾回收机制 访问修饰符 魔术方法 对象比较 继承 重载 属性重载 方法重写 属性重写 静态属性 静态方法 多态 类型约束 抽象类 接口 fin ...

  9. 调研pwa和sw

    概述 处于好奇,最近我调研了一下pwa和service worker,有些新的,记录下来,供以后开发时参考,相信对其他人也有用.pwa主要是通过service worker实现的,它主要包括桌面图标, ...

  10. [Swift]LeetCode1035.不相交的线 | Uncrossed Lines

    We write the integers of A and B (in the order they are given) on two separate horizontal lines. Now ...