Javascript 搜索栏动画中的运动图像问题

当焦点随动画上移时，我有一个搜索栏
我希望在搜索栏顶部放置相同的图像…
所以当我们点击搜索栏时，图像会变小，移动到左上角，搜索栏会同步向上移动

现在，我已经设法移动了搜索栏，但仍停留在图像部分…
我试图用JS检测焦点，然后对图像进行转换，但左边距和底部距不起作用

有人能帮忙完成吗？请

var input=document.getElementById（“搜索栏”）；
var homeImage=document.getElementById（“homeImage”）；
input.addEventListener（“焦点”，函数（）{
homeImage.classList.add（'horizTranslate'）；
});
#搜索栏{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：40%；
框大小：边框框；
边框：3倍实心；
边界半径：4px；
字体大小：16px；
背景色：白色；
背景图像：url（'search-icon.svg'）；
背景位置：10px 10px；
背景重复：无重复；
边框颜色：#ffaf7b；
填充：12px 20px 12px 40px；
过渡：宽度0.8s缓和，顶部0.5s缓和，边框颜色0.5s缓和；
}
#homeImage{
位置：绝对位置；
最高：28%；
左：45%；
}
#搜索栏：焦点{
宽度：90%；
最高：22%；
边框颜色：#ff512f；
}
霍利兹先生{
过渡期：3s；
保证金权利：50%；
}

不带javascript

CSS:

谢谢，但是为什么当我们尝试在focus+Part中添加宽度和高度时，高度和宽度没有设置动画，因为我没有更改高度或宽度。你可以把你想要的任何东西放在那里，它会改变是的，我添加了宽度和高度，但它们不会平滑地改变大小。。。要使转换生效，需要在两个选择器中设置样式参数。如果在第一个
#homeImge
选择器中设置宽度和高度，则过渡将具有参考和工作。
#SearchBar {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 40%;
  box-sizing: border-box;
  border: 3px solid;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("search-icon.svg");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  border-color: #ffaf7b;
  padding: 12px 20px 12px 40px;
  transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}

#homeImage {
  position: absolute;
  top: 28%;
  left: 45%;
  transition: 1s;
}

#SearchBar:focus {
  width: 90%;
  top: 22%;
  border-color: #ff512f;
  transition: 1s;
  margin-right: 50%;
}

#SearchBar:focus+#homeImage {
  top: 0;
  left: 80%;
  transition: 1s;
}