网站建设技巧

网站建设技巧

2006年起一直从事互联网行业,竭尽所能、尽心尽力为各行各业的客户提供服务

网站建设技巧 910次

JQ触发animate.css动画

在上一篇文章《wow.js和animate.css为网页添加动态效果》中,简单介绍了两者结合做出令人养眼的页面动画效果。但是我希望鼠标触发animate.css的动画怎么弄呢?


animate.css里面已经内置了很多动画效果,我们只需要在需要添加动画的地方直接写上该动画的名称即可。


比如我们需要一个放大进场的动画效果,我们通过Animate.css官网查看,看到这个效果的动画名称是叫zoomIn,那么我们只需要在样式的动画里面添加这个名称就可以了。


2.jpg


假设我们网页上有这样一个元素:


<div clase="logo">xxxxx</div>


就是这个logo,我们希望它能实现放大进场的效果


那么我们在css样式表中,logo这个样式中添加个 animation 属性的动画就可以了,比如:

.logo{animation:zoomIn 5s infinite;}


这样就可以实现动画的效果了,当然,animation 属性是一个简写属性,它有六个动画属性设置:

animation: name duration timing-function delay iteration-count direction;

animation:none 0 ease 0 1 normal。

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 

animation-timing-function 规定动画的速度曲线。 

animation-delay 规定在动画开始之前的延迟。 

animation-iteration-count 规定动画应该播放的次数。 

animation-direction 规定是否应该轮流反向播放动画。 


我们可能需要让这个logo不要那么快就结束动画,或者不要那么快开始动画,都可以在这个 animation 中设置好动画的属性。


比如我们需要它3秒后才开始动画,那么可以在样式中这么写:

.logo{animation:zoomIn 3s infinite;}


比如我们需要它3秒才播放完动画,我们可以在样式中这么写:

.logo{animation:zoomIn 3s 3s infinite;}


仔细调整样式名称和动画属性,就可以得到自己想要的动画效果了。

相关文章

联系我们

24小时服务热线

150 0622 7297

  • 微信二维码
    昆山网站建设
  • 微信二维码
    昆山网站建设

江苏苏州昆山市周市镇翠微西路

免费获取您的互联网建设与营销方案

欢迎访问WCDSTUDIO 24小时咨询电话15306227297