动画插件–AnimateCSS

全栈程序员站长

发布于 2022-09-18 14:13:23

1K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

1.什么是Animate.css?

其实swiper-animate就是参考Animate.css演变出来的一个插件,
Animate.css和swiper-animate一样都是用于快速添加动画的,
所以会用swiper-animate就会用Animate.css

2.Animate.css的使用:

引入animate.css的文件
给需要执行动画的元素添加类名

3.示例

animated这个类名是animated.css的基类, 但凡需要通过animated.css来添加动画, 都需要添加这个基类

    <link rel="stylesheet" href="css/animate.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 100px auto;
            /* 执行动画的次数 */
            /* animation-iteration-count: 3; */
            /* 动画延迟时间 */
            /* animation-delay: 6s; */
        }
        @keyframes myFadeIn {
            from {
                opacity: 0;
                transform: scale(2);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 自定义动画 */
        .myFadeIn {
            -webkit-animation-name: myFadeIn;
            animation-name: myFadeIn;
        }
    </style>

<!-- <div class="animated"></div> -->
<!--<div class="animated bounce"></div>-->
<!-- <div class="animated bounce infinite delay-2s"></div> -->
<div class="animated myFadeIn"></div>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157814.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css