动画

animation

[ animation-name ]： 检索或设置对象所应用的动画名称
[ animation-duration ]： 检索或设置对象动画的持续时间
[ animation-timing-function ]： 检索或设置对象动画的过渡类型
[ animation-delay ]： 检索或设置对象动画延迟的时间
[ animation-iteration-count ]： 检索或设置对象动画的循环次数

简写
animation： 名字 时间 速度曲线 延迟 次数 反向

@keyframes xxx{
  0%{}
  100%{}
}

延迟可以写负数

负数就是跳过几秒，立马开始动画

animation.css动画库

https://animate.style/
网址

• 首先需要下载css文件
• 引入项目 给需要的div加上官网拷贝的css名以及固定的class名animate__animated

P38

transition

• 需要是3D的得加上 transform-style：preserve-3d；
  transition： 过渡的属性名称 时间 速度曲线 延迟
  简写：transition：all（过渡所有）

两个动画的区别

• 使用区别
  transition，交互驱动，用户鼠标移入，点击一类的
  animation，自己动，刷新页面就直接执行