Javascript 如何在两个SVG之间交替转换

我想在两个SVG之间交替切换过渡动画。我有一个按钮，我想制作一个从SVG a到SVG B的平滑动画。单击浮动聊天按钮时的动画非常好。当聊天图标第一次淡出并在左侧稍微旋转时，十字也会出现并稍微旋转。当你关闭窗口时，它会反转动画

我在css动画方面非常差，所以当我们点击按钮时，你能帮我创建一个类似对讲机的动画吗

下面是我创建按钮的代码片段，我将对讲机聊天图标和十字图标（显示：无）放在按钮上

.float:focus{outline:0；}
.浮动{
宽度：60px；
高度：60px；
背景色：#0C9；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
光标：指针；
}
.我的花车{
边缘顶部：22px；
}
.btn颜色{
边界：无；
背景：#ea5a3d；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#ea5a3d 0%，#4e5ecc 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#ea5a3d 0%，#4e5ecc 100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（至底部，#e65a3d 0%，#4e5ecc 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ea5a3d'，endColorstr='#4e5ecc'，GradientType=0）；/*IE6-9*/
}

---

对我来说，它看起来像是沿着这些线的东西，旋转和褪色的组合

.float:焦点{
大纲：0；
}
.浮动{
宽度：60px；
高度：60px；
背景色：#0C9；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
光标：指针；
}
.我的花车{
边缘顶部：22px；
}
.btn颜色{
边界：无；
背景：#ea5a3d；
/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#ea5a3d 0%，#4e5ecc 100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#ea5a3d 0%，#4e5ecc 100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（至底部，#e65a3d 0%，#4e5ecc 100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ea5a3d'，endColorstr='#4e5ecc'，GradientType=0）；
/*IE6-9*/
}
按钮#按钮徽标{变换：旋转（0度）比例（1）；不透明度：1；过渡：全部0.1缓进缓出；}
按钮#闭合交叉{变换：旋转（-90度）；不透明度：0；变换：全部0.1缓进缓出；}
按钮：悬停#按钮徽标{变换：旋转（90度）比例（0.7）；不透明度：0；过渡：全部0.1缓进缓出；}
按钮：悬停#闭合交叉{变换：旋转（0度）；不透明度：1；变换：所有0.1秒缓进缓出；}

---

使用普通JavaScript和CSS转换：

功能切换聊天按钮（）
{
//扣上按钮
const btn=document.getElementById（'btn'）；
//添加单击事件
btn.addEventListener（'click'，函数（）{
//切换按钮类激活
this.classList.toggle（'active'）；
});
}
//用法示例
切换聊天按钮（）
/*使用按钮活动类转换内部div*/
#按钮标志，
#近交
{
过渡：所有.35都易于输入输出；
}
#btn.active#按钮徽标
{
变换：旋转（90度）比例（0）；
不透明度：0；
}
#btn：非（.active）#闭合交叉
{
变换：旋转（-90度）比例（0）；
不透明度：0；
}
/*原始代码*/
.float:focus{outline:0；}
.浮动{
宽度：60px；
高度：60px；
背景色：#0C9；
颜色：#FFF；
边界半径：50px；
文本对齐：居中；
盒影：2盒2盒3盒999；
光标：指针；
}
.我的花车{
边缘顶部：22px；
}
.btn颜色{
边界：无；
背景：#ea5a3d；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#ea5a3d 0%，#4e5ecc 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#ea5a3d 0%，#4e5ecc 100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（至底部，#e65a3d 0%，#4e5ecc 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ea5a3d'，endColorstr='#4e5ecc'，GradientType=0）；/*IE6-9*/
}

正是我想要的，非常完美，谢谢。但说真的，我不懂CSS代码动画！我真的需要学习，因为我不懂。你可以在Mozilla在线文档中找到很多关于过渡和动画的信息。这是过渡的链接谢谢你的回答，另一个解决方案正是我想要的，因为我需要点击它。你能告诉我如何用点击事件触发动画吗？