常用动画设置:

  • effect
  • easing
  • duration

 effect:

    • <select name="effects" id="effectTypes">
    • <option value="blind">百叶窗特效(Blind Effect)</option>
    • <option value="bounce">反弹特效(Bounce Effect)</option>
    • <option value="clip">剪辑特效(Clip Effect)</option>
    • <option value="drop">降落特效(Drop Effect)</option>
    • <option value="explode">爆炸特效(Explode Effect)</option>
    • <option value="fade">淡入淡出特效(Fade Effect)</option>
    • <option value="fold">折叠特效(Fold Effect)</option>
    • <option value="highlight">突出特效(Highlight Effect)</option>
    • <option value="puff">膨胀特效(Puff Effect)</option>
    • <option value="pulsate">跳动特效(Pulsate Effect)</option>
    • <option value="scale">缩放特效(Scale Effect)</option>
    • <option value="shake">震动特效(Shake Effect)</option>
    • <option value="size">尺寸特效(Size Effect)</option>
    • <option value="slide">滑动特效(Slide Effect)</option>
    • <option value="transfer">转移特效(Transfer Effect)</option>

easing:

  • swing
  • linear

css3-animate的更多相关文章

  1. css3 animate写的超炫3D转换

    上一篇中介绍了animate的基本的属性,这一篇讲的则是关于animate以及transforms的使用 <!DOCTYPE html><html lang="en&quo ...

  2. css3 animate基本属性

    Css3animate属性 属性 描述 Css Animation 所有动画属性的简写属性,除了animation-play-state属性 Animation:name duration timin ...

  3. 从小姐姐博客那里看到的流光文字(CSS3 animate)

    对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.你们卟懂绯紸流!色彩缤纷的QQ空间...... 还记得那些炫酷的签名档,或者那些炫酷的动态头像.不过大家对于流光文字的印象还是图片.那么在网页 ...

  4. css3 animate转圈360旋转

    .logo{ width:20px; height: 20px; background: red; -webkit-animation:haha1 .8s linear infinite; anima ...

  5. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  6. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  7. animate.css(第三方动画使用方法)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  8. 如何方便的控制css3动画开始时间点与持续时间

    一般我们在控制css3 animate动画时可以通过简写以减少代码量,只要在需要动画的元素上追加一下类名就可以了,如下例子 /*淡入并向上移动一点位置出现*/ .fadeInUp{ -webkit-a ...

  9. CSS3无前缀脚本prefixfree.js与Animatable使用

    现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...

  10. JQuery插件之Animate.css和 jquery-aniview

    Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...

随机推荐

  1. appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)

    前言 本篇介绍如何在微信公众号上自动化测试,以操作我的个人公众号:yoyoketang为例,没关注的,先微信关注了,再跟着操作 环境准备:python 3.6appium 1.7以上版本微信6.6.6 ...

  2. 从知名外企到创业公司做CTO是一种怎样的体验?

    这是我近期接受51CTO记者李玲玲采访的一篇文章,分享给大家. 作者:李玲玲来源:51cto.com|2016-12-30 15:47 http://cio.51cto.com/art/201612/ ...

  3. python输出缓冲区的问题

    碰到的问题,一段代码,print在前,log的在后,查看日志中log的反而在前面.是python输出缓冲区的问题. python输出缓冲区要满 4k 才写入文件,除非禁用缓存或者强制输出或者程序结束. ...

  4. 各种http报错的报错的状态码的分析

    HTTP常见错误 HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表 ...

  5. centos7图形化界面安装后,意外出现Please make your choice from above ['q' to quit | 'c' to continue | 'r' to refresh]

    安装完成centos7-GUI后出现如下提示: nitial setup of CentOS Linux (core) ) [x] Creat user ) [!] License informati ...

  6. idea 破解方法--可以使用到2099年

    破解方式有2种,第一种比较方便 第一种比较方便 1.使用注册码破解:http://idea.lanyus.com/ 复制这段: 2. 修改hosts文件: hosts位置:C:\Windows\Sys ...

  7. 虚拟机挂载光盘,同时修改yum源为光盘挂载目录

    VMware下挂载光盘并安装文件https://blog.csdn.net/gfd54gd5f46/article/details/53968293 linux修改yum本地源的方法https://w ...

  8. HTTP协议的简单解析

    超文本传输协议(HTTP,HyperText Transfer Protocol)是用于从服务器传输超文本到本地浏览器的传输协议,是应用最为广泛的网络协议.B/S网络架构的核心是HTTP,掌握HTTP ...

  9. js第四天学习小结:

    (1)函数的四种形式小结: 无参无返回值 function tellstory(){     console.log("从前有座山");     console.log(" ...

  10. css实战——第一天

    1.  开发前的准备 1.1配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 1.2建立项目文件夹 主页或是首页    index.html   d ...