CSS-动画模块

1. 告诉系统需要执行哪个动画
   animation-name: XXOO; (名字可以随便写)

2. 告诉系统动画持续的时长
   animation-duration: 3s;

3. 告诉系统我们需要自己创建一个名称叫做XXOO的动画

   @keyframes XXOO {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }

过渡和动画之间的异同

1. 不同点

   • 过渡必须人为的触发才会执行动画
   • 动画不需要人为的触发就可以执行动画

2. 相同点

   • 过渡和动画都是用来给元素添加动画的
   • 过渡和动画都是系统新增的一些属性
   • 过渡和动画都需要满足三要素才会有动画效果

动画模块其他属性

• 告诉系统多少秒之后开始执行动画
  animation-delay: 2s;

• 告诉系统动画执行的速度
  animation-timing-function: linear

• 告诉系统动画需要执行几次
  animation-iteration-count: 3;

• 告诉系统是否需要执行往返动画
  animation-direction: alternate;
  取值:
  normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
  alternate, 往返动画, 执行完一次之后往回执行下一次

• 告诉系统当前动画是否需要暂停
  animation-play-state: paused;
  取值:
  running: 执行动画
  paused: 暂停动画

• animation-fill-mode作用:
  指定动画等待状态和结束状态的样式
  动画是有一定的状态的:
  1. 等待状态
  2. 执行状态
  3. 结束状态
  取值:
  none: 不做任何改变
  forwards: 让元素结束状态保持动画最后一帧的样式
  backwards: 让元素等待状态的时候显示动画第一帧的样式
  both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

动画的另一种方式(百分比用做高级动画)

  @keyframes sport {
            0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            50%{
                left: 300px;
                top: 300px;
            }
            75%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top: 0;
            }

动画模块-连写

1. 动画模块连写格式
   animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

2. 动画模块连写格式的简写
   animation:动画名称 动画时长;