WCDSTUDIO专注于互联网服务!
24小时网站建设热线:15006227297
首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

JQ触发animate.css动画

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


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


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


Animate.css官网截图

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

<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;}

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

发表时间

20190201

发布人

JQ触发animate.css动画

被浏览次数

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2019