CSS3动画效果Animate.css基本使用方法

/* 引入Animate.css库 */
@import url("https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css");
 
/* 使用Animate.css中的动画类 */
.my-element {
    display: inline-block;
    /* 应用bounce动画，持续时间为1.5秒 */
    animation: bounce 1.5s infinite;
}
 
/* 如果需要覆盖某个动画的某个特定帧，可以使用keyframes */
@keyframes myCustomAnimation {
    0% {
        /* 动画开始时的状态 */
        opacity: 0;
        transform: translateX(-100px);
    }
    50% {
        /* 动画中间时刻的状态 */
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        /* 动画结束时的状态 */
        opacity: 0;
        transform: translateX(100px);
    }
}
 
/* 应用自定义动画 */
.my-custom-element {
    animation: myCustomAnimation 3s infinite;
}

这个示例展示了如何在CSS中引入Animate.css库，并且如何在自己的CSS样式中使用库中预定义的动画效果。同时，演示了如何创建自定义的关键帧动画并将其应用到元素上。这有助于开发者快速为他们的网站或应用添加生动的动画效果。