CSS 属性

CSS Animations是一种用于改变元素在网页上的外观和动作效果的技术。

  • 它们涉及两个关键组件:第一个第一部分包括指定元素动画的 CSS 属性，第二部分涉及定义动画的开始、结束和可能的中间状态的关键帧。

  • 本质上，CSS 动画允许在不同的动画之间平滑过渡。样式设置，在网络上提供动态且引人入胜的用户体验。

配置动画

  • 通过使用动画属性或其任何子属性设置所需元素的样式，您可以构建 CSS 动画序列。

  • 这允许您设置动画序列的计时，长度和其他细节。

  • 动画的实际外观是使用 @ keyframes按规则。这不会修改动画的外观。

CSS 动画: 子属性

以下是animation 属性的子属性:

属性说明
animation-composition指示当许多动画对同一属性同时产生效果时要应用的复合操作。
animation-delay指示动画是否应该从动画的开头或沿途的某个位置开始，以及元素加载和动画序列开始之间应经过的时间量。
animatiom-direction指示动画的初始迭代应该向前还是向后，以及之后的迭代是否应该继续每次执行序列时方向相同或改变方向。
animation-duration表示动画完成一个周期需要多长时间。
animation-fill-mode描述动画应用于其目标的运行前和运行后样式。
animation-iteration-count指示动画应重复出现的次数。
animation-name它给出了 @keyframes 的名称-描述动画关键帧的规则。
animation-play-state指示是否应播放或暂停动画序列。
animation-timing-function描述用于指定动画中关键帧过渡的加速曲线。