当前位置：首页 > CSS

css制作动漫

2026-02-13 05:21:34CSS

CSS 动画基础

CSS 动画通过 @keyframes 和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式。

@keyframes example {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: example 2s ease-in-out infinite;
}

常见动画效果

淡入淡出
通过调整 opacity 属性实现元素的淡入淡出效果。

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade 1.5s ease-in;
}

滑动效果
使用 transform 属性实现元素的平移效果。

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.slide-in {
  animation: slide 0.8s ease-out;
}

旋转效果
通过 rotate 函数实现元素的旋转动画。

css制作动漫

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 2s linear infinite;
}

复杂动画组合

弹跳效果
结合 translateY 和 ease-in-out 实现弹跳动画。

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bounce {
  animation: bounce 0.5s ease-in-out infinite;
}

闪烁效果
通过多关键帧控制 opacity 实现闪烁。

css制作动漫

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink {
  animation: blink 1s step-end infinite;
}

动画属性控制

animation 是以下属性的简写：

animation-name: 指定 @keyframes 名称
animation-duration: 动画持续时间
animation-timing-function: 速度曲线（如 ease, linear）
animation-delay: 延迟开始时间
animation-iteration-count: 播放次数（infinite 表示无限循环）
animation-direction: 播放方向（alternate 表示往返播放）
animation-fill-mode: 动画结束后的样式状态

.box {
  animation: 
    slide 3s ease-in-out 1s infinite alternate forwards;
}

性能优化建议

优先使用 transform 和 opacity 属性，这些属性不会触发重排（reflow）。
避免频繁修改 width, height, margin 等会触发布局变化的属性。
使用 will-change 属性预先告知浏览器可能的变化：

.optimized {
  will-change: transform, opacity;
}

响应式动画

通过媒体查询（@media）为不同屏幕尺寸调整动画参数：

@media (max-width: 600px) {
  .mobile-animation {
    animation-duration: 1s;
  }
}

示例：加载动画

以下是一个经典的旋转加载动画实现：

@keyframes loading {
  to { transform: rotate(360deg); }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: loading 1s linear infinite;
}