关键帧动画

Posted 2020-08-31 AdiaLike

<style type="text/css">

.demo{

animation-name: demoAnimation; 定义关键帧动画的名称 名称为我们使用@keyframes定义的动画

animation-duration: 2s;动画持续时间

animation-delay: 2s;设置动画的延迟进行时间 在关键帧动画里该属性对于动画回去的时候没有效果这点和过渡动画不同

animation-iteration-count: infinite;设置动画进行的次数 infinite代表无限次

animation-direction:alternate-reverse;定义动画在进行时的方向

默认值是normal代表动画正常时候的播放

reverse代表设置动画反向播放

alternate动画在奇数次正向播放，在偶数次反向播放

alternate-reverse设置动画奇数次反向播放 偶数次正向播放

animation-play-state: paused;设置动画暂停 默认是running

animation-fill-mode: forwards;设置动画的填充规则，即规定动画在播放之前或者之后，其动画效果是否可见

forwards代表在动画结束时保留最后一帧

animation-fill-mode: backwards;

backwards代表在animation-delay存在的时候等待时显示的为第一帧，不设置该属性的时候等待的显示为初始状态

both forwards和backwards都有

animation-timing-function: step-end;

steps()有两个参数第一个参数是数字代表动画进行的帧数，但是该数字设置的每个动画阶段的帧数

第二个参数可以是end或者start 默认是end

end代表在进行动画的时候省略100%的那一个状态

start代表在进行动画的时候省略0%的那个状态

step-start其和steps(1,start)一样

step-end其和steps(1,end)一样

}

 例.demo:hover{ animation-play-state: paused; } 在鼠标放在动画上暂停

@keyframes demoAnimation{

0%{width: 100px; }

50%{ width: 200px; }

100%{ width: 300px; }

}

@keyframes可以让我们来自定义关键帧动画，from代表动画开始的状态 也可以用0%，to代表是动画结束的状态 也可以用100%

</style>