css动画制作图片

CSS动画制作图片的方法

CSS动画可以通过关键帧（@keyframes）和过渡（transition）实现图片的动态效果。以下是几种常见的实现方式：

使用关键帧动画

通过@keyframes定义动画序列，并将其应用到图片元素上。

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

.image {
  animation: fadeIn 2s ease-in-out;
}

图片缩放效果

实现图片加载时的缩放动画。

@keyframes scale {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

.image {
  animation: scale 1.5s ease-out;
}

悬停旋转效果

通过transition实现鼠标悬停时的旋转动画。

.image {
  transition: transform 0.5s ease;
}

.image:hover {
  transform: rotate(360deg);
}

无限循环动画

结合@keyframes和animation-iteration-count实现无限循环。

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.image {
  animation: pulse 2s infinite;
}

多步骤动画

通过百分比定义多步骤动画效果。

@keyframes slideAndFade {
  0% { opacity: 0; transform: translateX(-50px); }
  50% { opacity: 0.5; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

.image {
  animation: slideAndFade 3s forwards;
}

注意事项

• 性能优化：优先使用transform和opacity属性，避免触发重排（如width/height）。
• 兼容性：添加浏览器前缀（如-webkit-）以确保跨浏览器支持。
• 硬件加速：对移动设备可添加will-change: transform;提升性能。