微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

Animate.css 纯CSS动画库_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:29:50
原创
1793人浏览过

github上的地址是： https://daneden.github.io/animate.css/


Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

基本的使用方法

  1. 引入css文件到

    标签中

    立即学习“前端免费学习笔记（深入）”；

    <head>  <link rel="stylesheet" href="animate.min.css"></head>
    登录后复制

  2. 给你想让执行动画的元素的class添加animated. 你还可以添加 infinite这个样式让动画无限循环.

    无限画
    无限画

    千库网旗下AI绘画创作平台

    无限画 43
    查看详情 无限画

  3. 最后你给元素添加下面的一个class，就可以实现不同的动画效果:

    • bounce
    • flash
    • pulse
    • rubberBand
    • shake
    • headShake
    • swing
    • tada
    • wobble
    • jello
    • 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
    • flipInX
    • flipInY
    • flipOutX
    • flipOutY
    • lightSpeedIn
    • lightSpeedOut
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • hinge
    • rollIn
    • rollOut
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp

例子: 

<h1 class="animated infinite bounce">Example</h1>
登录后复制

查看所有的动画效果



大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：link标签的rel等属性属性的作用简单介绍_html/css_WEB-ITnose 下一篇：JS一定要放在Body的最底部么？_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
实现HTML表单输入与JavaScript函数交互进行计算的教程 本教程详细讲解如何将HTML表单中的用户输入传递给JavaScript函数进行处理和计算。内容涵盖HTML表单的正确设置、JavaScript获取输入值的方法、执行计算逻辑、以及通过弹窗或控制台展示结果。文章还将强调常见的错误及最佳实践，确保用户输入能够被有效捕获和利用。
2025-11-08 10:54:01
520
构建现代前端路由与URL管理：从单页应用到JavaScript参数解析 本文旨在指导读者如何使用HTML和原生JavaScript实现现代Web应用中常见的URL结构，包括移除.html扩展名、构建嵌套页面以及通过URL传递数据。文章将介绍单页应用（SPA）的核心概念，并通过Barba.js框架示例展示客户端路由的实现。同时，还将详细讲解服务器端（Nginx）的URL重写配置，以及客户端JavaScript解析URL路径和查询参数的关键技术，助力开发者构建动态、用户友好的Web体验。
2025-11-08 10:48:24
376
优化Flexbox布局：控制子元素换行与实现动态间距 本文深入探讨了如何有效管理Flexbox布局中的子元素换行与间距问题。通过移除flex-wrap属性，可以阻止Flex项目在容器宽度不足时自动换行。同时，文章推荐使用justify-between代替固定的space-x或gap属性，以实现元素间动态且响应式的间距分布，从而在不同屏幕尺寸下保持布局的整洁和单行显示。
2025-11-08 10:43:01
610
使用Flexbox与JavaScript实现响应式两列布局的等高堆叠 本文探讨如何在响应式设计中实现两列布局的等宽等高堆叠。利用CSSFlexbox构建基础布局和媒体查询实现垂直堆叠，并通过JavaScript动态获取并同步列的尺寸，确保在不同屏幕尺寸下，包含视频和文本的两列始终保持宽度一致且高度相等，提供无缝的用户体验。
2025-11-08 10:40:11
903
解决CSS在不同电脑上显示异常：HTML结构与路径问题的深度解析 本文旨在解决CSS在本地正常显示但在其他设备上失效的问题。主要探讨了HTML结构错误、本地文件路径引用不当以及潜在的CSS语法错误等常见原因。通过提供修正后的代码示例和最佳实践，帮助开发者理解并避免这些跨环境渲染问题，确保网页样式的一致性与稳定性。
2025-11-08 10:36:16
961
在WordPress中创建每周循环倒计时器：JavaScript与HTML实践 本教程详细指导如何在WordPress网站上实现一个每周循环的倒计时器。我们将通过JavaScript计算距离下一个特定日期的剩余时间，并将其动态展示在HTML页面上。文章重点介绍了JavaScript逻辑的构建、HTML结构的匹配，以及解决倒计时器不显示秒数等常见问题的实践方法，确保计时器功能完整且显示准确。
2025-11-08 10:25:12
997
HTML id 属性唯一性：避免潜在问题与最佳实践 HTML中的id属性必须在整个文档中保持唯一。非唯一的id会导致JavaScriptDOM操作、CSS样式应用以及可访问性方面的问题，尽管表面上功能可能正常。本文将深入探讨id唯一性的重要性、潜在风险，并提供遵循Web标准以构建健壮、可维护应用的最佳实践和解决方案。
2025-11-08 09:46:15
892
深入理解CSS过渡：实现双向平滑动画的技巧 本文详细讲解了CSStransition属性在实现元素交互动画时常见的单向过渡问题。通过分析将transition属性错误地应用于:hover状态的原因，并提供了将transition属性应用于元素基础状态的解决方案，确保动画在鼠标移入和移出时都能平滑进行，从而提升用户体验。
2025-11-08 09:23:13
699
CSS导航栏全屏宽度布局：解决width: 100%不生效的问题 当使用position:fixed的导航栏设置width:100%时，可能因浏览器默认的body元素外边距导致无法完全占据屏幕宽度。本文将介绍两种有效解决方案：通过重置body的margin，或在导航栏样式中明确设置left:0，确保导航栏能完美贴合屏幕边缘。
2025-11-08 09:21:21
762
使用CSS @media print优化网页打印：消除空白页与实现横向布局 本教程详细阐述如何利用CSS的@mediaprint规则优化网页打印体验。内容涵盖诊断并解决打印时出现的空白页问题、强制页面以横向模式打印，以及探讨如何在单页内实现多栏（如双份）布局，确保打印输出专业且符合预期。
2025-11-08 09:13:10
317
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部