Html 设置div动画'；具有变换属性的s宽度

基本上，我希望我的div通过改变它的宽度从左到右显示。但是当

转换时：翻译（-50%，-50%）存在时，div的宽度将从其中心设置动画到指定位置

我无法将
位置更改为
绝对位置，因为div位于特定位置


.Container{
z指数：100；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：150像素；
动画：制作3s前进动画；
}
.货柜：之后{
内容：''；
位置：绝对位置；
排名：0；
左：90%；
宽度：200px；
高度：150像素；
背景色：rgb（110、110、110）；
变换：倾斜（-35度）；
变换原点：100%0；
z指数：99；
}
@关键帧设置动画{
从{
宽度：0px；
}
到{
宽度：250px；
背景色：红色；
}
}

你好
你好



只要从
.Container
类中删除
transform
属性，如果知道
宽度和
高度的确切值，就可以使用
计算（）

.Container{
z指数：100；
位置：绝对位置；
顶部：钙（50%-75px）；
左：计算（50%-125px）；
高度：150像素；
动画：制作3s前进动画；
}
.货柜：之后{
内容：''；
位置：绝对位置；
排名：0；
左：90%；
宽度：200px；
高度：150像素；
背景色：rgb（110、110、110）；
变换：倾斜（-35度）；
变换原点：100%0；
z指数：99；
}
@关键帧设置动画{
从{
宽度：0px；
}
到{
宽度：250px；
背景色：红色；
}
}
我会将一些属性移动到内部类，并进行一些小的修改来实现它；我还使用了
scale
作为宽度扩展动画，而不是动画
width
属性，以避免不必要的


.Container{
z指数：100；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：250px；
高度：150像素；
}
.项目说明{
身高：100%；
变换：scaleX（0）；
位置：绝对位置；
排名：0；
宽度：100%；
动画：制作3s前进动画；
}
.货柜：之后{
内容：''；
位置：绝对位置；
排名：0；
左：90%；
宽度：200px；
身高：100%；
框大小：边框框；
背景色：rgb（110、110、110）；
变换：倾斜（-35度）translateX（-50%）；
变换原点：100%0；
z指数：99；
动画：向前移动3s；
}
@关键帧设置动画{
到{
变换：scaleX（1）；
背景色：红色；
}
}
@关键帧移动{
到{
变换：倾斜（-35度）translateX（0%）；
}
}

你好
你好

第二个问题：是的，您可以设置动画：之后，至少使用过渡属性。