css 开场动画，递归显示，递归消失动画

CSS开场动画，递归显示，和递归消失动画都是利用 CSS 动画技术和 CSS3 中的 `@keyframes` 规则来创造动态效果。以下是关于这些动画的一些解释：

1. **开场动画**（入场动画）：这种动画发生在元素首次出现在页面上时，比如滚动到可视区域或完成加载。常见的开场动画有淡入、旋转、滑动等，可以通过设置元素的 `animation` 属性和关键帧（`@keyframes`）来实现。例如：

   .element {
     animation: fadeIn 1s ease-in-out forwards;
   }
   
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }

这里 `.element` 元素会在1秒内从完全透明渐变为可见。

2. **递归显示动画**（自包含动画）：这种动画是元素自身触发另一个相同的动画，可以用来制作层级结构的效果。例如，点击按钮时，按钮内部的部分逐级展开：

   .recursion-item {
     transition: transform 0.5s;
   }
   
   .active {
     transform: scale(1);
   }
   
   .toggle {
     &:hover > .recursion-item {
       transform: scale(1.1);
     }
   }

当鼠标悬停在`.toggle`上时，`.recursion-item`内的元素会放大，当用户停止悬停时，又会恢复初始状态。

3. **递归消失动画**（退出动画）：相反地，这种动画是元素在离开屏幕或者不再满足某个条件时逐渐消失。例如，一个下拉菜单关闭时的淡出效果：

   .dropdown-item {
     transition: opacity 0.3s ease-in-out;
     opacity: 1;
   }
   
   .closed .dropdown-item {
     opacity: 0;
   }

当`.closed`类应用到`.dropdown-item`上时，元素会慢慢变得不可见。