css动画基础使用-CSDN博客

本文链接：https://blog.csdn.net/qq_44476779/article/details/145490023

在当今追求用户体验的时代，静态网页早已无法满足用户的需求。CSS 动画作为一种轻量级、高性能的网页动画解决方案，能够为网页注入活力，提升用户交互体验。本文将带你走进 CSS 动画的世界，从基础概念到实际应用，一步步掌握如何使用 CSS 让网页元素动起来。

一、简介

CSS 动画允许你通过定义关键帧（keyframes）来控制元素的样式变化，从而实现动画效果。与传统的 JavaScript 动画相比，CSS 动画具有以下优势：

性能更优： CSS 动画由浏览器原生支持，无需 JavaScript 介入，运行更加流畅。
代码更简洁：使用 CSS 定义动画，代码更加简洁易读，维护成本低。
控制更灵活：可以通过 CSS 属性精确控制动画的持续时间、延迟、重复次数等。

二、创建 CSS 动画

创建 CSS 动画主要分为两个步骤：

定义关键帧：使用 @keyframes 规则定义动画在不同时间点的样式。
应用动画：使用 animation 属性将动画应用到目标元素上。

/* 定义关键帧 */
@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 应用动画 */
.box {
  animation: myAnimation 2s ease-in-out;
}

代码解析：

@keyframes myAnimation 定义了一个名为 myAnimation 的动画。
0% 和 100% 分别表示动画的开始和结束状态。
opacity 和 transform 属性用于控制元素的透明度和位移。
.box 元素应用了 myAnimation 动画，动画持续时间为 2 秒，使用 ease-in-out 缓动函数。

三、CSS 动画属性

animation-name : 定义动画关键帧名称。
animation-duration：定义动画持续的时间。
animation-timing-function: 控制动画的速度曲线，例如 ease, linear, ease-in, ease-out, ease-in-out 等。
animation-delay: 设置动画延迟时间。
animation-iteration-count: 设置动画重复次数，infinite 表示无限循环。
animation-direction: 控制动画播放方向，例如 normal, reverse, alternate, alternate-reverse 等。
animation-fill-mode: 控制动画播放前后元素的样式，例如 forwards, backwards, both 等。
animation-play-state: 控制动画的播放状态，例如 running, paused 等。