html5动画效果怎么设置_HTML5 CSS3动画关键帧用法-html教程-PHP中文网

html5动画效果怎么设置_HTML5 CSS3动画关键帧用法

看不見的法師

发布： 2025-10-20 16:27:02

原创

563人浏览过

关键帧动画（@keyframes）结合animation属性可实现HTML5动态效果。1. 用@keyframes定义0%到100%的样式变化；2. 通过animation-name、duration等子属性控制动画行为；3. 使用简写animation: name 3s linear infinite提升效率；4. 配合transform、opacity及fill-mode、alternate等技巧优化表现。需注意百分比写法与浏览器兼容性，建议添加-webkit-前缀并在现代浏览器测试，即可流畅实现位移、变色、旋转等常见动效。

html5动画效果怎么设置_html5 css3动画关键帧用法

HTML5 本身不直接提供动画功能，但结合 CSS3 的动画特性，可以轻松实现丰富的动态效果。关键帧动画（@keyframes）是 CSS3 提供的核心工具之一，用于定义动画的中间过程，让元素在不同状态之间平滑过渡。

1. 使用 @keyframes 定义关键帧

通过 @keyframes 规则，你可以指定动画在某个时间点的样式状态。浏览器会自动补全中间帧，形成流畅动画。

语法格式：

@keyframes 动画名称 {
  0% { 样式属性 }
  50% { 样式属性 }
  100% { 样式属性 }
}

示例：让一个 div 从左移到右并变色

立即学习“前端免费学习笔记（深入）”；

@keyframes slideAndColor {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  100% {
    background-color: blue;
    transform: translateX(200px);
  }
}

2. 将动画应用到元素

定义好关键帧后，使用 animation 属性将动画绑定到具体 HTML 元素。

常用 animation 子属性：

可画AI

Canva可画魔力工作室，一站式AI智能设计工具平台

158

查看详情

animation-name：指定 @keyframes 中定义的动画名称
animation-duration：动画持续时间（如 2s）
animation-timing-function：速度曲线（如 ease、linear）
animation-delay：延迟多久开始
animation-iteration-count：播放次数（infinite 表示循环）
animation-direction：播放方向（normal、reverse、alternate）

示例 CSS：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: slideAndColor;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

对应的 HTML：