css动画制作图片

CSS动画制作图片的方法

CSS动画可以通过@keyframes和animation属性实现图片的动态效果，例如旋转、缩放、淡入淡出等。

基础动画实现

定义一个@keyframes规则，描述动画从开始到结束的状态变化。将动画应用到图片元素上。

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

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

旋转动画

让图片无限旋转，可以使用transform: rotate属性。

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

img {
  animation: spin 3s linear infinite;
}

缩放动画

实现图片的放大缩小效果，结合transform: scale。

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

img {
  animation: pulse 2s infinite;
}

移动动画

让图片在页面中移动，使用transform: translate。

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

img {
  animation: move 3s ease-in-out infinite;
}

组合动画

可以同时应用多个动画效果，例如旋转和缩放。

@keyframes rotateAndScale {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1); }
}

img {
  animation: rotateAndScale 4s linear infinite;
}

悬停触发动画

通过:hover伪类在鼠标悬停时触发动画。

img {
  transition: transform 0.5s ease;
}

img:hover {
  transform: scale(1.1) rotate(10deg);
}

动画性能优化

使用will-change属性提前告知浏览器元素将发生变化，提升动画流畅度。

img {
  will-change: transform;
  animation: spin 3s linear infinite;
}

响应式动画

结合媒体查询，在不同屏幕尺寸下调整动画效果。

@media (max-width: 768px) {
  img {
    animation: pulse 2s infinite;
  }
}

注意事项

• 避免同时触发过多动画，可能导致性能问题
• 优先使用transform和opacity属性，这些属性不会触发重排
• 测试不同浏览器的兼容性，必要时添加前缀
• 考虑用户偏好，尊重prefers-reduced-motion设置

@media (prefers-reduced-motion: reduce) {
  img {
    animation: none;
  }
}