动画插件–AnimateCSS

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1.什么是Animate.css?

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

2.Animate.css的使用:

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

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>