css 下滑动画 |rac crs css 的关系

一、使用CSS3 transition实现下滑动画

.slide-down {
transition: all .3s ease;
max-height: 0;
overflow: hidden;
}
.slide-down.show {
max-height: 200px;
}

上述代码使用了CSS3的transition属性，当元素状态改变时，过渡效果会自动触发。通过设置max-height属性实现了元素的下滑动画效果。这种实现方式比较简单易懂，但是需要注意的是，max-height的值需要根据实际内容进行调整，否则会出现被截断的情况。

二、使用CSS3 animation实现下滑动画

.slide-down {
animation: slideDown .3s ease forwards;
max-height: 0;
overflow: hidden;
}
@keyframes slideDown {
from {
max-height: 0;
}
to {
max-height: 200px;
}
}

与transition不同的是，使用CSS3的animation属性可以实现更加复杂的动画效果。上述代码使用animation定义了一个名为slideDown的动画，动画时间为0.3秒，速度为ease，最终效果为元素滑动到指定高度并停止，因此需要加上forwards关键字。使用@keyframes定义了从0到200像素高度的动画过程，相对于transition实现方式，这种方式更加灵活，但需要编写比较冗长的动画过程代码。

以上是两种常用的CSS下滑动画实现方式，可以根据实际需要选择合适的方式进行实现。