css3 动画效果展开

CSS3动画效果的展开通常是指通过CSS的关键帧动画（@keyframes）或者`transition`属性来创建元素从隐藏到可见的过程。以下是两个常见的方法：

1. **关键帧动画**:
使用 `@keyframes` 规则，你可以定义一系列的动画状态，比如从0%（初始位置）开始，设置元素的透明度、宽度、高度等属性逐渐变化，直到100%（目标位置），元素完全显示出来。例如：

   @keyframes expand {
     0% { opacity: 0; width: 0; height: 0; }
     100% { opacity: 1; width: auto; height: auto; }
   }

   .expand-target {
     animation-name: expand;
     animation-duration: 1s;
     animation-timing-function: ease-in-out;
   }

2. **过渡效果** (Transition):
如果你想在元素的状态改变时立即应用动画，可以使用 `transition` 属性。比如当鼠标悬停在一个链接上时，链接会展开：

   a.expand-on-hover {
     transition: transform 0.5s ease-in-out;
   }

   a.expand-on-hover:hover {
     transform: scale(1.2);
   }

这里，`:hover` 伪类触发了从默认大小到缩放1.2倍的过渡效果。