HTML笔记 ·

短小精悍的css3动画库

在前面我介绍了一个css3动画实现元素圆周运动的特效动画,那只是css3动画库中的一个,css3还有很多动画特效,下面我来个大家介绍一下。

今天我介绍的这个css3动画库实现方式非常简单,只需在所要实现元素上添加类就可以了,具体请看下面:

渐入效果,由无逐渐出现(速度有点快):<div class="FadeIn" id="logo">Animator</div>
从上渐入出现:<div style="-webkit-animation:FadeIn 0.6s ease 3.0s 1 both" id="logo">Animator</div>
从左渐入出现:<div style="-webkit-animation:FadeInL 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从右渐入出现:<div style="-webkit-animation:FadeInR 0.6 ease 3.0s 1 both" id="logo">Animator</div>
逐渐淡出:<div style="-webkit-animation:FadeOut 0.6 ease 3.0s 1 both" id="logo">Animator</div>
向上渐出:<div style="-webkit-animation:FadeOutT 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从左渐出:<div style="-webkit-animation:FadeOutL 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从下渐出:<div style="-webkit-animation:FadeOutB 0.6 ease 3.0s 1 both" id="logo">Animator</div>
弹跳一下:<div style="-webkit-animation:Bounce 0.6 ease 3.0s 1 both" id="logo">Animator</div>
弹入:<div style="-webkit-animation:BounceIn 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从上弹入:<div style="-webkit-animation:BounceInT 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从左弹入:<div style="-webkit-animation:BounceInL 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从右弹入:<div style="-webkit-animation:BounceInR 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从下弹入:<div style="-webkit-animation:BounceInB 0.6 ease 3.0s 1 both" id="logo">Animator</div>
弹出:<div style="-webkit-animation:BounceOut 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从上弹出:<div style="-webkit-animation:BounceOutT 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从左弹出:<div style="-webkit-animation:BounceOutL 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从右弹出:<div style="-webkit-animation:BounceOutR 0.6 ease 3.0s 1 both" id="logo">Animator</div>
从下弹出:<div style="-webkit-animation:BounceOutB 0.6 ease 3.0s 1 both" id="logo">Animator</div>
翻转:<div style="-webkit-animation:Flip 0.6 ease 3.0s 1 both" id="logo">Animator</div>
沿X轴翻入(效果同翻转):<div style="-webkit-animation:FlipInX 0.6 ease 3.0s 1 both" id="logo">Animator</div>
沿Y轴翻入:<div style="-webkit-animation:FlipInY 0.6 ease 3.0s 1 both" id="logo">Animator</div>
闪烁:<div style="-webkit-animation:Flash 0.6 ease 3.0s 1 both" id="logo">Animator</div>
摇晃:<div style="-webkit-animation:Shake 0.6 ease 3.0s 1 both" id="logo">Animator</div>
摇曳:<div style="-webkit-animation:Wobble 0.6 ease 3.0s 1 both" id="logo">Animator</div>
响铃:<div style="-webkit-animation:Tada 0.6 ease 3.0s 1 both" id="logo">Animator</div>
拉伸弹动:<div style="-webkit-animation:RubberBand 0.6 ease 3.0s 1 both" id="logo">Animator</div>
滑入:<div style="-webkit-animation:LightSpeedIn 0.6 ease 3.0s 1 both" id="logo">Animator</div>
滑出:<div style="-webkit-animation:LightSpeedOut 0.6 ease 3.0s 1 both" id="logo">Animator</div>

这些动画特效只需引入animator.min.css即可实现,本站提供animator.min.css的下载,点击下面的下载即可。

参与评论