Javascript 为什么元素'；动画结束后的宽度更改？

我正在学习jQuery，测试它的功能，并且对我制作的一个示例有一些问题

/*删除animate2类并将animate1类指定给目标*/
$（函数（）{
$（'#trigger'）。在（'click'，function（）上{
$（“#目标”）.removeClass（'animate2'）；
$（'#target'）.addClass（'animate1'）；
});
});
/*删除animate1类并将animate2类指定给目标*/
$（函数（）{
$（'#trigger2'）。在（'click'，function（）上{
$（“#目标”）.removeClass（'animate1'）；
$（'#target'）.addClass（'animate2'）；
});
});
/*只是一个容器而已*/
#容器{
利润率：10px；
宽度：350px；
高度：350px；
边框：纯绿1px；
}
/*绿色按钮*/
#触发{
宽度：50px；
高度：50px；
边界半径：100%；
背景颜色：绿色；
保证金：20px自动；
}
/*红色按钮*/
#触发器2{
宽度：50px；
高度：50px；
边界半径：100%；
背景色：红色；
保证金：20px自动；
}
/*将要更改的目标div*/
#目标{
宽度：100px；
高度：100px；
边框：纯蓝1px；
利润率：10px自动；
}
/*绿色按钮的关键帧*/
@关键帧myfirst{
0% {
背景：白色；
宽度：100px；
高度：100px；
边界半径：0%；
}
100% {
背景：蓝色；
宽度：150px；
边界半径：100%；
}
}
/*红色按钮的关键帧*/
@关键帧秒{
0% {
背景：蓝色；
宽度：150px；
边界半径：100%；
}
100% {
背景：白色；
宽度：100px；
高度：100px；
边界半径：0%；
}
}
/*通过绿色按钮指定的类别*/
.动画1{
-webkit动画：MyFirst3s；
动画：我的第一个3s；
高度：100px；
背景：蓝色；
宽度：150px；
边界半径：100%；
利润率：10px自动；
}
/*通过红色按钮指定的类别*/
.动画2{
-webkit动画：mysecond3s；
动画：mysecond3s；
高度：100px；
宽度：150px；
边框：纯红1px；
边界半径：0%；
利润率：10px自动；
}
您可以像这样编写动画：MyFirst3sForWords
 您的
#目标
优先，因为它是一个id选择器。它的宽度为
100px
。您的类
animate1
被覆盖，因此您没有看到
150px

非常感谢你，詹妮弗！这里一个很好的教训是，在CSS中很少使用ID。依赖可重用类（类似类的集合）要好得多，即使它是一个集合。这使得你的CSS更少地依赖于标记，并且更容易根据优先级进行解读。你所建议的解决方案一点也不清楚。