css之animation

-animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

 @keyframes animiationName{
​                 keyframes-selector{
​                      css-style;
​                 }
​			}

-animation-duration

动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

-animation-timing-function

设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。 ​

ease 默认。动画以低速开始，然后加快，在结束前变慢。 ​

ease-in 动画以低速开始。 ​ ease-out 动画以低速结束。 ​

ease-in-out 动画以低速开始和结束。 ​

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

-animation-delay

设置动画在启动前的延迟间隔。

-animation-direction 指定是否应该轮流反向播放动画。

-animation-iteration-count

定义动画的播放次数。告诉系统动画需要执行几次

-animation-direction

指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次 ​

alternate （轮流）往返动画, 执行完一次之后往回执行下一次 ​

reverse 反向执行

-animation-fill-mode

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 不做任何改变 ​

forwards: 让元素结束状态保持动画最后一帧的样式 ​

backwards: 让元素等待状态的时候显示动画第一帧的样式 ​

both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

-animation-play-state

告诉系统当前动画是否需要暂停

running: 执行动画 ​

paused: 暂停动画

-动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

-动画模块连写格式的简写

animation:动画名称 动画时长;

animate.css

https://animate.style/

1.引入animate的cdn或本地animate.css文件

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

2.给指定元素加入class"animate__animated <动效名称>"

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>