让图片变成动画,@keyframes：动画制作

想躺平的小羊2024-09-10 9:46

keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以"@keyframes"开头，后面跟着是动画名称加上一对花括号"{...}"，括号中是一些不同时间段样式规则。

语法：@keyframes animationname {keyframes-selector{css-styles;}}

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

在一个"@keyframes"中的样式规则可以由多个百分比构成的，如在"0%"到"100%"之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到

一种在不断变化的效果。

keyframes语法结构

html 复制代码

@keyframes 动画名称 {
  0% { /* 初始状态样式 */ }
  50% { /* 中间状态样式 */ }
  100% { /* 结束状态样式 */ }
}

/* 或者多个关键帧 */
@keyframes 动画名称 {
  0% { ... }
  25% { ... }
  50% { ... }
  75% { ... }
  100% { ... }
}
动画名称：自定义的关键帧动画的名字，用于在需要动画的元素上引用该动画。
%：表示动画进度，0%为动画开始，100%为动画结束。在这两个值之间可以定义任意数量的关键帧，浏览器会根据这些关键帧的样式逐渐过渡。

比如：先有一张静态图片

运用keyframes设置成动画例如：