Html css动画如何实现宽度的变化？

我想保持长方体的左侧固定，并随时间增加其宽度，以便右侧水平移动

我写了下面的代码。您可以在下面的链接中尝试动画

div{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
-webkit动画名称：示例；/*Safari 4.0-8.0*/
-webkit动画持续时间：4s；/*Safari 4.0-8.0*/
动画名称：示例；
动画持续时间：4s；
}
/*Safari 4.0-8.0*/
@-webkit关键帧示例{
0%{背景色：红色；左侧：0px；顶部：0px；}
25%{背景色：黄色；左侧：200px；顶部：0px；}
50%{背景色：蓝色；左侧：200px；顶部：200px；}
75%{背景色：绿色；左侧：0px；顶部：200px；}
100%{背景色：红色；左侧：0px；顶部：0px；}
}
/*标准语法*/
@关键帧示例{
0%{背景色：红色；左侧：0px；顶部：0px；变换：比例（0.1,1）；}
25%{背景色：黄色；左侧：0px；顶部：0px；比例（0.1,1）；}
50%{背景色：蓝色；左侧：0px；顶部：0px；比例（0.1,1）；}
75%{背景色：绿色；左侧：0px；顶部：0px；比例（0.1,1）；}
100%{背景色：红色；左侧：0px；顶部：0px；比例（0.1,1）；}
}
注意：此示例在Internet Explorer 9和早期版本中不起作用

---

但它保持了广场的中心是固定的，两边都在移动。如何保持一边固定，而只水平移动另一边？

您可以使用

变换原点来实现这一点（）

转换原点
规则允许您指定应用CSS转换的参考点（或原点）

在您的情况下，关键是变换原点相对于
的左侧，这是通过在动画的两个阶段将
变换原点的第一个坐标设置为
0%
来实现的，如下所示：

div {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear; /* Add this */

}

@keyframes example {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
        transform-origin: 0% 0%; /* Add this */
        transform: scale(0.1,1);
    }

    100% {
        background-color: yellow;
        left: 0px;
        top: 0px;
        transform-origin: 0% 0%; /* Add this */
        transform: scale(1,1);
    }
}

您可以只设置
宽度的动画
，而不使用
变换比例


div{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
动画名称：示例；
动画持续时间：4s；
}
@关键帧示例{
0%{背景色：红色；宽度：0；}
25%{背景色：黄色；}
50%{背景色：蓝色；}
75%{背景色：绿色；}
100%{背景色：红色；宽度：100px；}
}
谢谢，我把你的代码放在这里了。它似乎没有任何作用-
div {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear; /* Add this */

}

@keyframes example {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
        transform-origin: 0% 0%; /* Add this */
        transform: scale(0.1,1);
    }

    100% {
        background-color: yellow;
        left: 0px;
        top: 0px;
        transform-origin: 0% 0%; /* Add this */
        transform: scale(1,1);
    }
}