当前位置: 首页 > Web前端 > CSS

CSS动画_2

时间:2023-03-30 16:55:40 CSS

关键帧关键帧(keyframe)是指动画过程中的特定时刻。我们定义了一些关键帧,浏览器负责在这些关键帧之间填充或插值帧图像以创建关键帧动画@keyframesover-and-back{0%{background-color:hsl(0,50%,50%);变换:翻译(0);}50%{转换:翻译(50px);}100%{背景颜色:hsl(270,50%,90%);变换:翻译(0);}}动画属性animationanimationproperty简写属性,用于设置六个动画属性:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction默认值:none0sease0s1normalvalue说明animation-name指定需要绑定到选区关键帧(keyframeanimation)名称animation-duration指定完成动画所花费的时间,以秒或毫秒为单位。animation-timing-function指定动画的速度曲线。animation-delay指定动画开始前的延迟。.animation-iteration-count指定动画应该播放多少次。animation-direction指定是否依次反向播放动画。animation-fill-modeanimation-fill-mode属性指定动画效果是在动画播放之前还是之后可见。值说明none(默认)动画样式在向前执行动画之前或之后都不会应用到元素上当动画完成时,保留最后一个属性值(在最后一个关键帧中定义)。在动画显示一段由animation-delay指定的时间之前,forwards应用start属性值(在第一个关键帧中定义)。前向和后向填充模式均适用。