熟悉CSS的人都知道，CSS可以实现很多漂亮的动画，特别是它的在线功能，能够帮助人们解决很多制作动画的效果。今天特别推荐一个在线CSS插件功能——cssanimate，这个最大的特色就是以图形界面方式让你轻易实现漂亮的CSS3动画效果，下面一起看看这个在线工具的介绍。

CSS3动画制作工具界面介绍

Timeline（时间轴）

Timeline是引导动画的重要区域，就像制作逐帧动画一样，可以调整每帧的内容。用户调整完毕后，直接点击左下角的播放按钮即可看到效果。

视区

视区就是CSS3动画预览和调整区域，所见即所得，很强大。

视区

视区就是CSS3动画预览和调整区域，所见即所得，很强大。

Code面板

当你调整完动画后，那么就在这里直接COPY到你的网页上就能使用了，另外你还可以修改Class和Animation名称，还有浏览器前缀选项，根据需求调整。

工具名称：cssanimate
网站地址：http://cssanimate.com/

另外在补充一个国产的：http://www.shouce.ren/example/show/s/6869

在线制作css动画——CSS animate的更多相关文章

  1. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  2. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  3. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  4. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  5. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  6. CSS动画框架Loaders.css +animate.css

    CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...

  7. animate CSS动画程序接口（仅Chrome可用）

    jQuery中很早就提供了animate方法,使用它可以很方便地实现一些简单动画效果.后来CSS3中也提供了animation用于动画效果制作,但CSS本身的可操作性太差,所以用起来并不方便.现在最新 ...

  8. Animate.css让添加CSS动画像喝水一样容易

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  9. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

随机推荐

  1. Linux内核入门到放弃-进程管理和调度-《深入Linux内核架构》笔记

    进程优先级 硬实时进程 软实时进程 普通进程 O(1)调度.完全公平调度器 抢占式多任务处理(preemptive multitasking):各个进程都分配到一定的时间段可以执行.时间段到期后,内核 ...

  2. input表单提交完毕，返回重新填入有黄色背景，和 历史记录 清除

    <input autocomplete="value"> // 添加这个属性,可以解决然后添加一个css input:-webkit-autofill {box-sha ...

  3. java 基础 动态绑定和多态

  4. Git 使用vi或vim命令打开、关闭、保存文件

    1 vi & vim 有两种工作模式: (1)命令模式:接受.执行 vi & vim 操作命令的模式,打开文件后的默认模式: (2)编辑模式:对打开的文件内容进行 增.删.改 操作模式 ...

  5. Django 的路由层 视图层 模板层

    --------------------------------------------------------------通过苦难,走向欢乐.——贝多芬 Django-2的路由层(URLconf) ...

  6. python二：数据类型举例练习--小白博客

    一.#字符串 res = 'hello,world' 1.#字符串切片取值:******* print(res[0:5]) 顾头不顾尾,取下标0-4的字符 print(res[0:-1:2]) 步长为 ...

  7. H5 32-百度首页

    32-百度首页 新 闻 网 页 贴 吧 知 道 音 乐 图 片 视 频 地 图 百科 文库 hao123 | 更多>> 百度地图带你吃喝玩乐,全心全意为人民服务 把百度设为主页 安装百度卫 ...

  8. JAVA项目中的常用的异常处理情况

    NO.1 java.lang.NullPointerException 这个异常比较容易遇到,此异常的解释是“程序遇上了空指针”,简单地说就是调用了未经初始化的对象或者是不存在的对象,这个错误经常出现 ...

  9. [2017BUAA软工助教]团队建议

    关于团队项目的个人建议 (以下排名不分先后) 一.hotcode5 你们组要做一个"课件-心得"共享平台 目前最大的竞争对手其实不是北航课程中心网站,而是每个系自己的大班群. 热心 ...

  10. 【转】给word中的代码着色

    基本操作 1)用Notepad++直接编辑代码文件,注意文件后缀,比如.cpp是C++程序,.m是Matlab,linux文件是.sh,写对后缀表示的文件类型,才有对应的语法高亮效果. 2)选中需要的 ...