[分享]css动画效果图代码

CSS动画效果图可以为网站带来更多交互性和视觉吸引力，下面是一些CSS动画效果图代码示例。

/* 垂直滑动动画 */
.slide-in {
  opacity: 0;
  transform: translateY(100%);
}

.slide-in.active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease-in-out;
}

/* 闪烁动画 */
.blink {
  animation: blink 1.5s ease-in-out infinite alternate;
}

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

/* 缩放动画 */
.scale {
  animation: scale 0.5s ease-in-out infinite alternate;
}

@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
} 

这些动画效果可以通过给相应的HTML元素添加类名来触发。

例如：

<div class="slide-in"></div>

<script>
  document.querySelector('.slide-in').classList.add('active');
</script> 

以上代码为一个触发垂直滑动动画的示例，当使用JavaScript控制添加类名后，该元素就会从底部逐渐滑入并透明度逐步变化。