html css animation,css_animation.html

H+ 后台主题UI框架 - css动画

CSS动画 http://daneden.github.io/animate.css/

• 选项1
• 选项2

Animation.css

Animation.css是一个迷人的动画库，它提供了一堆很酷的，有趣的，跨浏览器的动画，你可以在项目中调用它们。

动画效果示例框

48%

市场销售额

点击下面按钮，可以从“动画效果示例框”中预览效果

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flip

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

slideInDown

slideInLeft

slideInRight

slideOutLeft

slideOutRight

slideOutUp

hinge

rollIn

rollOut

$(document).ready(function(){$(".animation_select").click(function(){$("#animation_box").removeAttr("class").attr("class","");var animation=$(this).attr("data-animation");$("#animation_box").addClass("animated");$("#animation_box").addClass(animation);return false});var graph2=new Rickshaw.Graph({element:document.querySelector("#rickshaw_multi"),renderer:"area",stroke:true,series:[{data:[{x:0,y:2},{x:1,y:5},{x:2,y:8},{x:3,y:4},{x:4,y:8}],color:"#1ab394",stroke:"#17997f"},{data:[{x:0,y:13},{x:1,y:15},{x:2,y:17},{x:3,y:12},{x:4,y:10}],color:"#eeeeee",stroke:"#d7d7d7"}]});graph2.renderer.unstack=true;graph2.render()});

一键复制

编辑

Web IDE

原始数据

按行查看

历史