CSS动画：基本知识与实用示例

锦匠网页

于 2024-09-14 17:13:01 发布

阅读量578

点赞数 11

分类专栏： HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/WXLink/article/details/142262887

版权

HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

CSS动画：基本知识与实用示例

来源：锦匠网页

CSS动画是前端开发中一种强大的技术，它允许我们在不使用JavaScript的情况下创建平滑的过渡和动画效果。本文将介绍CSS动画的基本知识，并提供一些实用的示例来展示如何在你的项目中应用它们。

CSS动画基础

CSS动画是通过在特定时间内逐步改变CSS属性来实现的。它们由几个关键部分组成：

@keyframes：这是一个定义动画序列的规则集，其中可以包含多个关键帧，每个关键帧描述了动画的某个阶段。
动画属性：这些属性控制动画的各个方面，包括：
- animation-name：指定@keyframes规则的名称。
- animation-duration：定义动画完成一个周期所需的时间。
- animation-timing-function：描述动画的速度曲线。
- animation-delay：设置动画开始前的延迟时间。
- animation-iteration-count：指定动画播放的次数。
- animation-direction：定义动画是否反向播放。
- animation-fill-mode：指定动画在开始前后如何应用样式。
- animation-play-state：控制动画的播放状态。

实用示例

示例1：渐变背景颜色

这个示例展示了如何创建一个渐变背景颜色的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
  @keyframes gradientBackground {
    0% { background-color: #ff7e5f; }
    50% { background-color: #feb47b; }
    100% { background-color: #ff7e5f; }
  }

  body {
    animation: gradientBackground 5s ease infinite;
  }
</style>
</head>
<body>
  <h1>渐变背景颜色动画</h1>
</body>
</html>

示例2：滑动进入

这个示例展示了如何使一个元素从右侧滑动进入视图。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
  @keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  .slide-in {
    animation: slideIn 1s ease-out forwards;
    opacity: 0;
  }

  .slide-in.visible {
    animation-delay: 1s;
    opacity: 1;
  }
</style>
</head>
<body>
  <div class="slide-in">滑动进入</div>
  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      const element = document.querySelector('.slide-in');
      setTimeout(() => {
        element.classList.add('visible');
      }, 1000);
    });
  </script>
</body>
</html>

示例3：闪烁文本

这个示例展示了如何创建一个简单的文本闪烁效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .blink-text {
    animation: blink 1s linear infinite;
  }
</style>
</head>
<body>
  <h1 class="blink-text">闪烁的文本</h1>
</body>
</html>