[分享]css3怎么封装一个动画

CSS3是前端开发中常用的一种技术，它可以帮助我们实现各种各样的动画效果。下面我将介绍一种基于CSS3封装动画的方法。/定义一个封装动画的CSS类/ .anim { animationduration...

CSS3是前端开发中常用的一种技术，它可以帮助我们实现各种各样的动画效果。下面我将介绍一种基于CSS3封装动画的方法。

/*定义一个封装动画的CSS类*/
.anim {
  animation-duration: 1s;  /*动画持续时间*/
  animation-fill-mode: both;  /*动画结束后元素状态*/
}

/*定义动画开始时的样式*/
@keyframes anim-start {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}

/*定义动画结束时的样式*/
@keyframes anim-end {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(50px); }
}

/*定义动画的使用情况*/
.anim-start {
  animation-name: anim-start;  /*使用动画开始的样式*/
}

.anim-end {
  animation-name: anim-end;  /*使用动画结束的样式*/
} 

上述代码中，我们首先定义了一个封装动画的CSS类.anim，它包含了动画的持续时间和结束后元素的状态。接着，我们定义了动画的开始和结束样式，使用了@keyframes关键字，分别被命名为anim-start和anim-end。最后，我们定义了动画的使用情况，即.anim-start和.anim-end类，分别使用了动画开始和结束的样式。

通过以上的CSS代码，我们实现了一个可以封装动画的方法。在html中，只需在需要添加动画的元素添加.anim类，并可根据需要添加.anim-start或.anim-end类，便可实现动画效果。