首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

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

文章标签

animate.css

被浏览次数

点我搜索

“CSS”相关的文章

  • 昆山网站建设小编讲讲IIS如何使用

    2018-12-14

    通过前文《如何在win7系统里创建ASP程序测试环境》我们学会了在win7系统里面安装IIS,那么如何使用IIS来创建运行网站呢?...

  • Ps Play无法连接的问题

    2018-04-05

    前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...

  • 替代Ps play的设计稿实时预览工具PsMirror

    2018-01-31

    PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......

  • 配置PHPStorm2017主题(颜色字体)

    2017-12-24

    PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...

  • 使用css解决视频大小自适应

    2017-03-07

    自适应网站有的时候会碰到视频页面,那么怎么样才能让页面中的视频也能自适应设备屏幕尺寸呢?...

  • 如何优化自己的网站

    2016-12-19

    一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2020CSS快速查询CSS选择符演示html常用标签演示flexui