动画23.2.22

2023.2.22

关键帧

语法一：

@keyframes run {

From{动画开始}

to{动画结束}

}

语法二：

<!-- 自定义动画

animation：name

animation-name：run；（动画名称 绑定关键帧动画的）

animation-duration：1s；（动画执行时间 单位：s、ms 1s=1000ms）

animation-timing-function：ease；（动画的运动速度曲线）

    取值：linear匀速 ease默认值 ease-in以慢速开始 ease-out以慢速结束 ease-in-out慢速开始和结束

animation-delay：1s；（规定动画延迟时间）

    取值：s ms

        默认值：0

        允许负值（-1 使动画立马开始，但是跳过1s进入动画）

animation-iteration-count：infinite；（规定动画的执行次数）

    取值：n 数字

        默认值1

        infinite无限次播放动画

animation-direction：normal；（定义动画是否轮流反向播放）

    取值：normal默认，正常播放

        alternate 动画轮流反向播放

        alternate 从第一次就反向播放

animation-fill-mode：backwards；（动画结束之后显示的状态）

    取值：both动画开始或结束的地方

          backwards动画开始的状态

          forwards动画结束的状态

animation-play-state：；（动画的播放方式）

    取值：paused暂停

          running运动

-->