纯css如何改变盒子的宽高导致其有伸缩的动画效果?

1.对于一般的盒子我们都是直接设置宽和高的,对于这种有宽和高的盒子直接修改它的width和height值,再使用transition或者animation设置它的duration,就可以看到宽和高的伸缩效果
2.有的盒子,我们为了布局和内容是不会给它height的,这种情况下,它只有靠子盒子的大小来撑开,这种情况下想要父盒子的height产生伸缩效果,使用height重新赋值就不行了,它会直接变成重新赋值后的大小,秒变,就算你transition和animation都设置了duration也还是会秒变,那这个时候如何使父元素的height产生慢慢伸缩的动画效果呢?
这个时候就不能在transition/animation里直接改变height了,而是使用transform里面的scale属性即可.
注意:使用scale放缩的盒子还占有网页原来的位置,下方的盒子无法自动补上来
番外记忆点:
1.谁做动画给谁加,过渡写到本身上
2.btn:hover{}作用:当鼠标悬浮在btn上时,btn产生什么操作
btn:hover+.hello{}作用:当鼠标悬浮在btn上时,hello会产生什么操作.