CSS动画

102 阅读1分钟

transition:; 过渡 需要事件触发

        animation       动画 不需要事件触发,使用关键帧就可以执行
            1: 定义动画
                from{}起始位置
                to{}终点位置
                 
                0%{}起始位置
                25%{}过程1
                ...过程n
                100%{}  终点位置
                 
            2: 调用动画
            animation-name:;关键帧名字 动画名
            animation-duration:;关键帧时长 总运动时间
            animation-delay:;关键帧延迟时间
            animation-iteration-count:;运动执行次数 
                数字   数字为几,执行多少次 
                默认情况一次 
                infinite无限循环
            animation-direction:;动方向
                reverse 反向运动
                alternate   单数次,顺时针  偶数次,逆时针
                alternate-reverse 单数次,逆时针  偶数次,顺时针
            animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)
            animation-play-state:; 
                paused  暂停
                running 运动
                 
            3:综合写法:
                animation:名字 运动时间 速度 延迟时间 次数;