Html 从中心开始从左到右的CSS过渡

如何确保从中心开始的跨度向上和向下扩展。我不知道我是否已经解释过了，我附上了代码以便你能理解我的意思。有人能帮我吗

正文{
字体：标题；
背景色：#f1f1；
位置：相对位置；
身高：100%；
}
.第一个切换器{
显示：内联块；
高度：38px；
边缘顶部：50px；
填充：0px；
背景：灰色；
边界半径：2px；
宽度：200px；
边界半径：38px；
位置：相对位置；
}
.第一个切换器输入2{
显示：无；
}
.第一个切换器输入1{
显示：无；
}
.第一个切换器切换器标签1{
浮动：左；
宽度：100px；
字体大小：12px；
线高：38px；
颜色：#ffffff；
文本对齐：居中；
光标：指针；
职位：继承；
z指数：10；
过渡：颜色0.2s立方贝塞尔（0.4,0.0,0.2,1）；
改变：转变；
}
.第一个切换器切换器标签2{
浮动：左；
宽度：100px；
字体大小：12px；
线高：38px；
颜色：透明；
文本对齐：居中；
光标：指针；
职位：继承；
z指数：10；
过渡：颜色0.2s立方贝塞尔（0.4,0.0,0.2,1）；
改变：转变；
}
.第一个开关开关{
位置：绝对位置；
浮动：左；
高度：0px；
宽度：0px；
字体大小：12px；
线高：38px；
光标：指针；
背景色：#000000；
边界半径：38px；
左：0px；
顶部：14px；
过渡：左0.25s三次贝塞尔（0.4,0.0,0.2,1）；
改变：转变；
}
.第一切换器输入1：选中+.第一切换器标签1{
颜色：白色；
}
.第一切换器输入2：选中+.第一切换器标签2{
过渡延迟：1s；
颜色：白色；
}
.first_switcher___输入1:未（：选中）+first_switcher__标签1{
颜色：透明；
}
.第一切换器输入2：选中~.第一切换器切换{
-webkit过渡：宽度2s，高度2s；
过渡：宽度2s，高度2s；
高度：38px；
宽度：200px；
左：0px；
}

在…上
关

您需要同时设置宽度/高度和顶部的动画，以便在生长时将元素保持在中心位置

正文{
字体：标题；
背景色：#f1f1；
位置：相对位置；
身高：100%；
}
.第一个切换器{
显示：内联块；
高度：38px；
边缘顶部：50px；
填充：0px；
背景：灰色；
边界半径：2px；
宽度：200px；
边界半径：38px；
位置：相对位置；
}
.第一个切换器输入2{
显示：无；
}
.第一个切换器输入1{
显示：无；
}
.第一个切换器切换器标签1{
浮动：左；
宽度：100px；
字体大小：12px；
线高：38px；
颜色：#ffffff；
文本对齐：居中；
光标：指针；
职位：继承；
z指数：10；
过渡：颜色0.2s立方贝塞尔（0.4,0.0,0.2,1）；
改变：转变；
}
.第一个切换器切换器标签2{
浮动：左；
宽度：100px；
字体大小：12px；
线高：38px；
颜色：透明；
文本对齐：居中；
光标：指针；
职位：继承；
z指数：10；
过渡：颜色0.2s立方贝塞尔（0.4,0.0,0.2,1）；
改变：转变；
}
.第一个开关开关{
位置：绝对位置；
高度：0px；
宽度：0px；
字体大小：12px；
线高：38px；
光标：指针；
背景色：#000000；
边界半径：38px；
左：0；/*已更新*/
排名：50%；/*已更新*/
过渡：所有0.25s三次贝塞尔（0.4,0.0,0.2,1）；
改变：转变；
}
.第一切换器输入1：选中+.第一切换器标签1{
颜色：白色；
}
.第一切换器输入2：选中+.第一切换器标签2{
过渡延迟：1s；
颜色：白色；
}
.first_switcher___输入1:未（：选中）+first_switcher__标签1{
颜色：透明；
}
.第一切换器输入2：选中~.第一切换器切换{
转换：所有2；/*已更新*/
高度：38px；
宽度：200px；
左：0；/*已更新*/
顶部：计算（50%-19px）；/*已更新*/
}

在…上
关

谢谢你的回答，但我希望动画从左侧开始，以中间位置为中心height@RiccardoCamera在这种情况下，在两种情况下都保持左：0states@RiccardoCamera很好，因为你是新来的，我会提醒你，如果答案解决了你的问题，那么最好将答案标记为已接受，这样问题就可以从未回答的队列中删除。。当然，你不必这么做，你可以这样做，以防你等待更多的安检者和更多的替代品。嗨，里卡尔多，你应该考虑隔离你的问题，再张贴。对于人们来说，查看您的整个代码以确定错误是很有挑战性和耗时的。请参阅StackOverflow的发布指南。