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

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设置成动画例如:

相关推荐
明月看潮生5 天前
青少年编程与数学 02-022 专业应用软件简介 03 三维建模及动画软件:Autodesk Maya
青少年编程·动画·maya·三维建模·编程与数学·应用软件
伍哥的传说14 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说15 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
JiaLin_Denny18 天前
css 制作一个可以旋转的水泵效果
前端·css·动画·animation·transition
旅行中的伊蕾娜25 天前
前端实现ios26最新液态玻璃效果!
前端·css3·动画
吴边落木1 个月前
【3D插件推荐】PolyCloth v2.07 超强布料模拟工具(附图文安装教程与下载)
数学建模·动画
T.D.C1 个月前
【动画】Unity2D骨骼动画-Animation2D
unity·动画
你脸上有BUG1 个月前
Css实现悬浮对角线边框动效
前端·css·动画
探索前端1 个月前
vue封装gsap自定义动画指令
前端·javascript·vue.js·动画
一只鱼^_1 个月前
用JS实现植物大战僵尸(前端作业)
javascript·css·vscode·游戏引擎·游戏程序·html5·动画