css从上向下展开动画

CSS中的从上向下展开动画，通常使用`transform: translateY()`和`transition`属性配合来实现。这种效果常常用于创建响应式菜单或卡片的展示效果。以下是一个基本的示例：

/* 先定义元素初始状态 */
.card {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease-in-out; /* 设置过渡效果，时间可根据需要调整 */
}

/* 展开动画 */
.card.expanded {
  transform: translateY(-100%); /* 当类名变为.expanded时，元素向上移动到屏幕外 */
}

/* 可选：添加一些触发动画的样式，如点击按钮 */
.button {
  /* ... */
  &:hover .card, &:focus .card { /* 当按钮被悬停或聚焦时，触发动画 */
    &.expanded { transform: translateY(0); }
  }
}

在这个例子中，`.card`元素在`.expanded`类被添加时会从屏幕顶部逐渐滑动到可视区域。`translateY(-100%)`会使元素完全移出视口，而`translateY(0)`则会将其恢复到原始位置。

相关问题：
1. 如何控制动画的持续时间和速度曲线？
2. 是否可以通过JavaScript来触发这个动画效果？
3. CSS动画还有哪些类似的展示效果可以实现？