大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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.net/157814.html原文链接：https://javaforall.net
