Как чередовать переход между двумя SVG ⇐ CSS

[Anonymous]

Я хотел бы чередовать анимацию перехода между двумя SVG. У меня есть кнопка, и я хочу сделать плавную анимацию из SVG A в SVG B. Анимация внутренней связи, когда вы нажимаете на плавающую кнопку чата, действительно хороша. В первый раз, когда на значке чата появляется затухание и небольшой поворот слева, затем также появляется крестик с небольшим поворотом. И он выполняет обратную анимацию, когда вы закрываете окно.

Я очень плохо разбираюсь в CSS-анимации, можете ли вы помочь мне создать анимацию, похожую на интерком, когда мы нажимаем кнопку?

Вот мой фрагмент, в котором я создаю кнопку и помещаю на нее значок чата внутренней связи и значок крестика (на дисплее: нет)

.float:focus {outline:0;} .плавать{ ширина: 60 ​​пикселей; высота: 60 ​​пикселей; цвет фона: # 0C9; цвет: #FFF; радиус границы: 50 пикселей; выравнивание текста: по центру; коробка-тень: 2px 2px 3px #999; курсор: указатель; } .my-float{ поле-верх: 22 пикселей; } .btn-цвет { граница: нет; фон: #ea5a3d; /* Старые браузеры */ фон: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */ фон: -webkit-linear-gradient(top, #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 */