CSS 提供了多种方式来创建图片动画，这些动画可以增强用户体验和页面的视觉吸引力。以下是一些常见的 CSS 图片动画效果

1.淡入淡出（Fade In/Out） 使用 transition 或 animation 属性，改变图片的 opacity。

   .fade {
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
   }

   .fade:hover {
     opacity: 1;
   }

2.缩放（Scale） 使用 transform: scale() 来放大或缩小图片。

   .scale {
     transition: transform 0.3s ease-in-out;
   }

   .scale:hover {
     transform: scale(1.1);
   }

3.旋转（Rotate） 使用 transform: rotate() 来旋转图片。

   .rotate {
     transition: transform 0.5s ease-in-out;
   }

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

4.平移（Translate） 使用 transform: translate() 来水平或垂直移动图片。

   .translate {
     transition: transform 0.5s ease-in-out;
   }

   .translate:hover {
     transform: translateX(50px);
   }

5.倾斜（Skew） 使用 transform: skew() 来扭曲图片。

   .skew {
     transition: transform 0.5s ease-in-out;
   }

   .skew:hover {
     transform: skew(20deg);
   }

6.翻转（Flip） 结合 transform: rotateX() 或 rotateY() 来创建翻转效果。

   .flip {
     perspective: 1000px;
   }

   .flip-inner {
     transition: transform 0.5s;
     transform-style: preserve-3d;
   }

   .flip:hover .flip-inner {
     transform: rotateY(180deg);
   }

   .front, .back {
     backface-visibility: hidden;
     position: absolute;
     width: 100%;
     height: 100%;
   }

   .back {
     transform: rotateY(180deg);
   }

7.闪烁（Flash） 使用 animation 和 keyframes 来创建闪烁效果。

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

   .flash {
     animation: flash 1s infinite;
   }
      @keyframes flash {
     0%, 100% { opacity: 1; }
     50% { opacity: 0; }
   }

   .flash {
     animation: flash 1s infinite;
   }

8.渐变（Gradient） 使用 linear-gradient 或 radial-gradient 背景叠加在图片上，结合 transition 动画。

   .gradient {
     background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
     transition: background-image 0.5s;
   }

   .gradient:hover {
     background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.5));
   }

以上动画效果可以通过 CSS 类和伪类（如 :hover）来触发，也可以通过 JavaScript 动态地控制动画的播放。在实际项目中，可以根据设计需求和性能考虑来选择合适的动画类型。

更多动画: animate.css

延伸阅读