一、自定义动画
是动画的终极解决方案。
相当于将GIF做的事情用代码来实现。
步骤如下：
1. 定义关键帧 –设计动画的过程
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
使用@keyframes定义动画有点类似于JS的定义函数：function 函数名(){}
@keyframes 动画的名字{
//不同的状态（帧-起点第二个点第三个点。。。最后一个点）
//起点 from 0%
from{
//写任意的样式（盒模型、透明度、颜色、定位属性、transform等样式）
}
//其他状态可以用百分比来表示
50%{
}
70%{
}
//to改为100%
to{
//终点（写任意的样式（盒模型、透明度、颜色、定位属性、transform等样式））
}
}
//动画：起点改为不同的样式的值
//比如：
@keyframes dong{
from{
left:0;
}
to{
left:100px
}
}
//让小盒子从0到100px进行移动定义动画跟标签无关。动画是独立的，与元素无关。要关联需要使用animation调用动画。
2. 调用动画 animation 是样式属性
类似于JS的调用函数：函数名();
使用原则：你要让谁有动画效果，就给谁调用动画。即animation写在要动画的元素的样式上。
//调用动画需要使用一个属性来调用：它相当于是transition的角色，比transition多3个属性。
animation:动画的名字 持续时间 [延迟时间 运动形式 动画的次数 是否来回运动];
比如：
animation:dong 1s;
以上可以拆为如下属性：
所有animation属性:
animation-name: myfirst;/*@keyframes动画名称*/
animation-duration: 5s;/*动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-delay: 2s;/*动画何时开始。默认是 0*/
animation-timing-function: linear;/*动画的速度曲线。默认是 "ease"。*/
animation-iteration-count: infinite;/*动画被播放的次数。默认是 1。*/值n、infinite（无限次）*/
animation-direction: alternate;/*动画是否在下一周期逆向地播放。默认是 "normal"。也就是偶数次会改变动画方向，动画交替的执行*/
animation-play-state: running;/*动画是否正在运行或已暂停，值running、paused*/
animation-fill-mode : none | forwards(最后一帧) | backwards | both; /*规定动画在播放之前或之后，其动画效果是否可见。*/二、第三方的动画库animation.css的学习
免去了设计动画的烦恼，可以直接使用它提供的丰富的动画效果。该动画库是一个样式文件。
直接导入到项目中，调用即可。
-
导入
<link href="animate.min.css"> -
使用
1、基本用法： 在需要动画的元素上添加class，比如： class="animate__animated animate__bounce" class="animate__animated animate__改为动画的名字" 2、更丰富的用法,在上面2个基础class的基础上可以继续添加配置： 添加延迟class: animate__delay-2s 2s animate__delay-3s 3s animate__delay-4s 4s animate__delay-5s 5s 添加速度的class: 默认不写是1秒 animate__slow 2s animate__slower 3s animate__fast 800ms animate__faster 500ms 添加动画次数：默认是1次 animate__repeat-1 1 animate__repeat-2 2 animate__repeat-3 3 animate__infinite infinite- 详细的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1\导入动画库样式 --> <link rel="stylesheet" href="css/animate.min.css"> </head> <body> <!-- 2、用 class="animate__animated animate__bounce" class="animate__animated animate__改为动画的名字" 启用动画 用何种动画 --> <!-- 1、基础用法 --> <img class="animate__animated animate__bounce" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" > <img class="animate__animated animate__swing" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" > <!-- 延迟2秒 --> <img class="animate__animated animate__tada animate__delay-2s" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" > <!-- 更快的动画效果 --> <img class="animate__animated animate__tada animate__fast" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" > <!-- 无限次动起来 --> <img class="animate__animated animate__tada animate__infinite" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" > </body> </html>更多例子请在文章下方下载相应物料和案例。
需要下载阿里网盘，不是vip也可以高清：https://pages.aliyundrive.com/mobile-page/web/beinvited.html?code=8b0925d
相关单词
- from 从。。 form
- to 到
- keyframes 关键帧
- animation 动画 animate
- infinite 无限
- alternate 交替执行
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
