• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 基于轻量级高性能的CSS3动画库

基于轻量级高性能的CSS3动画库

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,基于轻量级高性能的CSS3动画库,html5cn,html5资料,html5文章,htm等相关知识,匿名希望在学习及工作中可以帮助到您
  简要教程

  Repaintless.css是一款轻量级高性能的CSS3动画库。Repaintless.css通过特殊的方法来制作元素动画,不会引起页面的重绘,使它比其它CSS动画库具有更高的性能。



  安装

  你可以通过bower或npm来安装Repaintless.css。


$ bower install repaintless $ npm install repaintless

  

  使用方法

  使用该CSS3动画库需要在页面中引入repaintless.css文件。


  要使一个元素可以动画,你需要做的就是为该元素添加element-animated class,这个是必须添加的class类,然后使用第二个class类来指明你需要的动画类型。

默认情况下动画的时间是1秒钟。你可以通过class short来指定动画时间为0.5秒,long为2秒。如果你需要做无穷动画,可以添加infinite class。


I am quick! I am slooow... I will do that forever to drive you crazy!

  

  动画类型

  Repaintless.css所有可用的动画类型如下。某些动画是会一直循环的动画。

  slide-from-top

  slide-from-bottom

  slide-from-left

  slide-from-right

  slide-from-right-bottom

  slide-from-right-top

  slide-from-left-bottom

  slide-from-left-top

  slide-top-bottom (looped)

  slide-left-right (looped)

  tremble (looped)

  fade-in

  fade-out

  pulsate (looped)

  rotate

  Repaintless.css动画库的github地址为:https://github.com/szynszyliszys/repaintless


  来源:http://www.htmleaf.com/css3/css3donghua/201603073189.html

您可能想查找下面的文章:

  • 一款利用html5和css3动画排列人物头像的实例演示
  • html5教程调用绘图api画简单的圆形代码分享
  • html5教程画矩形代码分享
  • html5教程制作简单画板代码分享
  • html5基础教程常用技巧整理
  • html5教程-Canvas入门
  • html5教程画矩形代码分享
  • HTML5晃动DeviceMotionEvent事件
  • HTML5教程之html 5 本地数据库(Web Sql Database)
  • HTML5中对contenteditable属性的解释与规定

相关文章

  • 2018-12-03解析HTML的增强标记
  • 2018-12-03App Store 或者 Google Play Store 中有哪些不错的 HTML5 app?
  • 2017-08-06简单的HTML5初步入门教程
  • 2018-12-03HTML5中的hgroup是干啥的?HTML5中的hgroup标签的具体用法在这,点进来看看吧
  • 2018-12-03H5手机端图片上传插件代码
  • 2017-08-06HTML5 history新特性pushState、replaceState及两者的区别
  • 2018-12-03详细介绍html5之拖放的示例代码
  • 2017-08-06HTML5标签与HTML4标签的区别示例介绍
  • 2017-08-06HTML5+CSS3实现拖放(Drag and Drop)示例
  • 2018-12-03Html5游戏框架createJS组件-EaselJS详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • JS猜数字游戏如何判断一个数字是否被猜过?
    • HTML 中的 span 标签标准用途是什么?
    • HTML5实现的震撼3D焦点图动画详解介绍
    • HTML5 常用meta 标签 属性
    • html5七大优势“逼宫”APP
    • 为什么现在HTML5的优势越来越大
    • HTML5 Canvas绘制五星红旗
    • canvas绘制各种基本图形
    • HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
    • HTML5主要新增标签的使用代码分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有