CSS @property 颜色过渡动画实例

CSS @property 颜色过渡动画实例

基础知识

@property 语法回顾

@property --custom-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

颜色表示方式

在使用 @property 进行颜色动画时，我们可以使用以下颜色格式：

• HEX: #RRGGBB
• RGB: rgb(r, g, b)
• RGBA: rgba(r, g, b, a)
• HSL: hsl(h, s%, l%)
• HSLA: hsla(h, s%, l%, a)

基本颜色过渡

1. 简单颜色过渡

@property --main-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

.color-box {
  width: 100px;
  height: 100px;
  background: var(--main-color);
  transition: --main-color 0.5s ease;
}

.color-box:hover {
  --main-color: #0000ff;
}

2. 多状态颜色切换

@property --status-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #grey;
}

.status-indicator {
  background: var(--status-color);
  transition: --status-color 0.3s;
}

.status-indicator.success { --status-color: #4caf50; }
.status-indicator.warning { --status-color: #ff9800; }
.status-indicator.error { --status-color: #f44336; }

高级动画技巧

1. 渐变色过渡

@property --gradient-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

@property --gradient-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #00ff00;
}

.gradient-box {
  background: linear-gradient(
    45deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  transition: --gradient-start 0.5s, --gradient-end 0.5s;
}

.gradient-box:hover {
  --gradient-start: #0000ff;
  --gradient-end: #ffff00;
}

2. HSL 色相动画

@property --hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.rainbow-box {
  background: hsl(calc(var(--hue) * 1deg), 70%, 60%);
  animation: hue-rotate 3s linear infinite;
}

@keyframes hue-rotate {
  to {
    --hue: 360;
  }
}

3. 脉冲效果

@property --pulse-color {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255, 0, 0, 0.2);
}

.pulse {
  background: var(--pulse-color);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { --pulse-color: rgba(255, 0, 0, 0.2); }
  50% { --pulse-color: rgba(255, 0, 0, 0.8); }
  100% { --pulse-color: rgba(255, 0, 0, 0.2); }
}

实战示例

1. 主题切换按钮

@property --button-bg {
  syntax: '<color>';
  inherits: false;
  initial-value: #2196f3;
}

@property --button-text {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

.theme-button {
  background: var(--button-bg);
  color: var(--button-text);
  transition: --button-bg 0.3s, --button-text 0.3s;
}

[data-theme="dark"] .theme-button {
  --button-bg: #333333;
  --button-text: #ffffff;
}

[data-theme="light"] .theme-button {
  --button-bg: #ffffff;
  --button-text: #333333;
}

2. 加载进度指示器

@property --progress-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #e0e0e0;
}

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.progress-bar {
  width: var(--progress);
  background: var(--progress-color);
  transition: --progress 0.3s, --progress-color 0.3s;
}

.progress-bar[data-progress="100"] {
  --progress: 100%;
  --progress-color: #4caf50;
}

性能优化

1. 使用硬件加速

.animated-element {
  transform: translateZ(0);
  will-change: background;
}

2. 减少同时动画的属性数量

/* 好的实践 */
@property --combined-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

/* 避免同时动画多个颜色属性 */
.element {
  background: var(--combined-color);
  transition: --combined-color 0.3s;
}

3. 使用 RequestAnimationFrame

// 当需要通过 JavaScript 控制颜色动画时
function updateColor(element, startColor, endColor, duration) {
  const start = performance.now();
  
  function update(currentTime) {
    const elapsed = currentTime - start;
    const progress = Math.min(elapsed / duration, 1);
    
    element.style.setProperty('--dynamic-color', 
      interpolateColor(startColor, endColor, progress));
    
    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }
  
  requestAnimationFrame(update);
}

兼容性处理

1. 特性检测

@supports (animation-timeline: works) {
  @property --custom-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff0000;
  }
  
  .animated-element {
    /* 现代浏览器样式 */
  }
}

/* 后备样式 */
.animated-element {
  transition: background-color 0.3s;
}

2. JavaScript 回退方案

if (!CSS.registerProperty) {
  // 提供传统的 CSS transition 实现
  element.style.backgroundColor = newColor;
}

最佳实践建议

1. 动画性能

   • 优先使用 opacity 和 transform 属性
   • 避免同时动画过多元素
   • 使用 will-change 提示浏览器优化

2. 可访问性

   • 考虑减少动画（prefers-reduced-motion）
   • 确保颜色对比度符合 WCAG 标准
   • 避免闪烁效果

3. 代码组织

   • 将动画相关的 CSS 分组
   • 使用有意义的变量名
   • 添加适当的注释说明

4. 调试技巧

   • 使用浏览器开发工具检查动画
   • 测试不同的动画时长和缓动函数
   • 验证在不同设备上的性能

通过合理使用 @property 实现颜色动画，可以创建流畅、高效的视觉效果。记住要在实现炫酷效果的同时，始终考虑性能和可访问性。