• 技术文章 >web前端 >前端问答

    animate.css是什么意思

    WBOYWBOY2022-09-14 17:01:19原创180

    “animate.css”是一个使用css3中animation制作动画效果集合的意思;“animate.css”中预设了很多常用的动画,适合快速使用,同时也方便进行按需修改,语法为“<element class="animated 效果类名">”。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    animate.css是什么意思

    animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用

    Animate.css是一款简单高效的css库,里面封装了若干种简单的常见动画,适合快速使用,同时也方便进行按需修改。

    导入文件

    <head>
    <link rel="stylesheet" href="animate.min.css">
    </head>
    <div class="animated bounce"></div>

    animated,每一个应用animate.css效果的元素都必须添加这个类名;

    bounce,选择你想要的效果的类名添加即可。

    $('#element').addClass('animated bounce');
    $('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
    animationend', function);

    注意

    当效果执行完,元素还在文档流中占据着空间(即使你已经看不到元素),所以如果你想让元素真正消失,要在执行完动画时把元素隐藏起来,如:

    $('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
     animationend', function(){$(this).hide();});

    (学习视频分享:css视频教程html视频教程

    以上就是animate.css是什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css里pc是什么单位 下一篇:html5中使用什么标签嵌入音频
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• css怎么设置左边距消失• css 3d中的z轴指什么• css创建文本阴影适用于图片么• css怎么改变li标签的高度• 一文聊聊 9 个冷门的css属性
    1/1

    PHP中文网