[分享]css元素可见时开动画

CSS动画是很好用的一种技巧，在网页设计中可以帮助提升用户体验。而实现元素在可见时开动画也是其中的一种技巧。/ 定义动画 / keyframes myAnimation { 0 { opacity: ...

CSS动画是很好用的一种技巧，在网页设计中可以帮助提升用户体验。而实现元素在可见时开动画也是其中的一种技巧。

/* 定义动画 */
@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 初始状态 */
.myElement {
  opacity: 0;
  transform: translateY(50px);
}

/* 触发动画 */
.myElement.show {
  animation: myAnimation 1s ease;
} 

以上代码中，使用了CSS3的动画技巧，定义了一个从初始位置到目标位置的动画，包括透明度和位置。在初始状态下，元素的透明度为0，位置也有位移，这样可以让元素看起来和页面脱离开了。而当元素的类名中有show时，触发动画效果。这个类名可以通过JS控制。通过这样的设置，可以让元素在可见时开动画，提升页面视觉效果。