15-CSS动画模块

动画属性

• 动画属性需要满足三要素才会有动画效果
  1.告诉系统需要执行哪个动画
  2.告诉系统我们需要自己创建一个名称叫做lnj的动画
  3.告诉系统动画持续的时长
• 动画特点: 动画不需要人为的触发就可以执行动画

 div{
            width: 100px;
            height: 100px;
            background-color: green;
            /*1.告诉系统执行哪个动画*/
            animation-name: sport;
            /*3.告诉系统动画时长*/
            animation-duration: 4s;
        }

        /*2.指定动画名称和动画运动效果*/
        @keyframes sport {
            from{
                margin-left: 0;
                margin-top: 0;
            }
            to{
                margin-left: 500px;
                margin-top: 500px;
            }
        }

• 动画模块的其他属性
  • animation-delay: 2s;指定动画延迟时间
  • animation-timing-function: linear;指定动画以何种速度类型运动
  • animation-iteration-count: 3;指定动画执行次数
  • animation-direction: alternate;指定动画运动方向
  • animation-play-state 告诉系统动画是否暂停
    取值:
    running: 执行动画
    paused: 暂停动画

动画状态属性

• 通过我们的观察, 动画是有一定的状态的
  1.等待状态
  2.执行状态
  3.结束状态

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

动画模块连写

• 1.动画模块连写格式
  animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
  属性连写的前后顺序可以任意
• 2.动画模块连写格式的简写
  animation:动画名称 动画时长;

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            animation: sport 2s 2s linear alternate 3;
        }

        @keyframes sport {
            from{
                margin-left: 0;
            }

            to{
                margin-left: 500px;
            }
        }
</style>