68种动画效果的CSS3动画库vivify.css

当前位置:主页 > CSS3库 > CSS3动画 > 68种动画效果的CSS3动画库vivify.css
68种动画效果的CSS3动画库vivify.css
分享:

    插件介绍

    Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似,为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-30
    阅读:
麦子学院
简要教程

Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似,为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。

使用方法

在页面的head中引入vivify.css文件。

<link href="css/vivify.css" rel="stylesheet">
                
HTML结构

然后只需要简单的为需要进行CSS3动画的元素设置动画class类即可,例如:

<div class="ball"></div>             
                

vivify.css动画库支持的动画class类如下:

  • ball
  • blink
  • driveInBottom
  • driveInLeft
  • driveInRight
  • driveInTop
  • driveOutBottom
  • driveOutLeft
  • driveOutRight
  • driveOutTop
  • fadeIn
  • fadeInBottom
  • fadeInLeft
  • fadeInRight
  • fadeInTop
  • fadeOut
  • fadeOutBottom
  • fadeOutLeft
  • fadeOutRight
  • fadeOutTop
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • fold
  • hitLeft
  • hitRight
  • jumpInLeft
  • jumpInRight
  • jumpOutLeft
  • jumpOutRight
  • popIn
  • popInBottom
  • popInLeft
  • popInRight
  • popInTop
  • popOut
  • popOutBottom
  • popOutLeft
  • popOutRight
  • popOutTop
  • pullDown
  • pullLeft
  • pullRight
  • pullUp
  • pulsate
  • rollInBottom
  • rollInLeft
  • rollInRight
  • rollInTop
  • rollOutBottom
  • rollOutLeft
  • rollOutRight
  • rollOutTop
  • shake
  • spin
  • spinIn
  • spinOut
  • swoopInBottom
  • swoopInLeft
  • swoopInRight
  • swoopInTop
  • swoopOutBottom
  • swoopOutLeft
  • swoopOutRight
  • swoopOutTop
  • unfold

vivify.css动画库的github地址为:https://github.com/Martz90/vivify

网友评论