下面是一些常用的 CSS 动画效果的示例：
淡入淡出
<divclass="box"></div><style>.box { width: 200px; height: 200px; background-color: #f00; opacity: 1; transition: opacity.5sease-in-out; } .box:hover { opacity: 0; } </style>
缩放
<divclass="box"></div><style>.box { width: 100px; height: 100px; background-color: #f00; transition: transform.5sease-in-out; } .box:hover { transform: scale(1.5); } </style>
旋转
<divclass="box"></div><style>.box { width: 100px; height: 100px; background-color: #f00; transition: transform.5sease-in-out; } .box:hover { transform: rotate(360deg); } </style>
位移
<divclass="box"></div><style>.box { width: 100px; height: 100px; background-color: #f00; transition: transform.5sease-in-out; } .box:hover { transform: translate(50px, 50px); } </style>
通过以上示例可以看出，CSS 动画效果可以很方便地实现各种动画效果，而且代码量比较小，易于维护。
值得注意的是，在实际开发中，我们应该根据实际需求选择合适的动画效果，并注意动画效果的流畅性和性能问题，以提高用户体验和页面性能。
