动画

调用动画:

    animation:动画名称动画时间延迟时间运动类型运动次数运动方向是否运动;
    animation-name :动画名称
    animation-duration:运动时间;
    animation-delay:0s ;/*延迟时间; 
    animation-timing function:动画类型; 
        linear
        ease
        ease- in
        ease -out
        ease - in-out
        step -start逐帧动画
        
    animation iterat ion- count :运动次数 ;
        infinite无限循环
        number具体次数
    animation-direction:运动方向;
        normal 默认值
        reverse 反向运动
        alternate 先正后反
        alternate-reverse 先反后正
        

动画:

    1:定义关键帧
    2:调用关键帧
    

定义关键帧:

    方法一:
    @keyframes move1{
        from{}起始位
        to{} 结束位
    }
    方法二:
    @keyframes move2{ 
        0%{}
        50%{}
        100%{ }
    }

animation-play-state

    animation-play-state:是否运动;
        running 运动
        paused  暂停
    animation和transition对比:
        相同点:都是随着时间的变化而变化
        不同点: animation不需 要触发方式，页面加载完成立即执行
                transition需要触发方式