最近一直苦恼做一个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. 积极参与开源项目，促进.NET Core生态社区发展

    今天早上在微信群里聊天聊到百度的SDK 已经支持.NET Core, 百度已经在3月份就支持了,想起当时还是我在他们的github上提的issue: https://github.com/Baidu- ...

  2. java安装和配置（3.18）

    大家好,我是一名笨笨的程序小白,刚刚学习完C#的基本开发,现在要开始学习java了!我希望在博客园里记录下我的学习日记,我也不敢保证自己会讲的东西多么全面,但是都是比较基础的东西,如果对你也有点点的小 ...

  3. PMBook - 7.项目成本管理

    7.1 规划成本管理 7.1.1 规划成本管理:输入 7.1.1.1 项目章程 7.1.1.2 项目管理计划 7.1.1.3 事业环境因素 7.1.1.4 组织过程资产 7.1.2 规划成本管理:工具 ...

  4. Android 8.0系统的应用图标适配

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 参考资料<一起来学习Android 8.0系统的应用图标适配吧>中已经讲得很清楚了,这里我只是简单总结下.详情的内容请阅 ...

  5. docker~yml里使用现有网络

    回到目录 我们在进行docker swarm部署高可用集群时,在yml文件里可能要配置一些服务,而这些服务可能要使用一些公用的数据库,这些数据库可能已经运行在某个容器里,而这些容器有自己的网络,doc ...

  6. 学习ASP.NET Core Razor 编程系列十九——分页

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  7. 学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  8. 论文学习-系统评估卷积神经网络各项超参数设计的影响-Systematic evaluation of CNN advances on the ImageNet

    博客:blog.shinelee.me | 博客园 | CSDN 写在前面 论文状态:Published in CVIU Volume 161 Issue C, August 2017 论文地址:ht ...

  9. 【Javascript】JS遍历数组的三种方法：map、forEach、filter

    前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...

  10. DSAPI 菜单渲染

    在本节,将演示DSAPI.菜单渲染功能.本功能支持对WINFORM菜单项的任意细节进行处理,使用配色方案进行渲染,默认配色方案为Visual Studio2012的黑色主题风格. 我们先来看一下未使用 ...