[分享]css3展开动画代码

CSS3为网页开发者提供了一些很棒的动画效果，其中之一就是展开动画。

/* 定义一个动画效果 */
@keyframes unfold {
  from {height: 0; opacity: 0;}
  to {height: 100px; opacity: 1;}
}

/* 应用动画效果 */
.box {
  height: 0; /* 初始高度为0 */
  opacity: 0; /* 初始透明度为0 */
  animation: unfold 0.5s forwards; /* 应用动画效果，持续0.5秒，结束时保留最后一个状态 */
} 

在上面的代码中，我们定义了一个名为“unfold”的动画效果，该效果将一个元素的高度从0过渡到100px，以及将元素的透明度从0过渡到1。我们还定义了.box元素的初始状态为高度为0且透明度为0，并将动画效果应用于该元素。在动画完成时，该元素将保留最后一个状态。

如果我们希望展开动画具有更多的交互性，则可以添加一些JavaScript代码来为元素添加CSS类。例如，我们可以使用以下代码在用户单击按钮时展开元素：

document.getElementById("button").addEventListener("click", function() {
  document.getElementById("box").classList.add("unfold");
}); 

在上述代码中，我们为按钮添加了一个单击事件监听器，在用户单击按钮时向.box元素添加.unfold类。该类具有与上述动画效果相同的动画样式，因此，该元素将展开。

展开动画是一种很好的方式来让页面元素更有趣和有吸引力。使用CSS3和JavaScript，我们可以创建许多不同的展开动画效果，并根据自己的喜好和需求进行自定义。