How to alternate transition between 2 SVG

Question

I'd like to alternate the transition animation between 2 SVG. I have a button and I want to make a smooth animation from the SVG A to the SVG B. The intercom animation when you click on the floating chat button is really nice. The first time there is a fadeOut on the chat icon and a little rotate on the left then the cross appears with a little rotate too. And it does reverse animation when you close the window.

I'm really bad in css animation so can you help me to create an animation like intercom when we click on the button ?

Here is my snippet where I create the button and I put the intercom chat icon and the cross icon (in display: none) on the button

    .float:focus {outline:0;}
    .float{
        width:60px;
        height:60px;
        background-color:#0C9;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        cursor: pointer;
    }

    .my-float{
        margin-top:22px;
    }

    .btn-color {
        border: none;
        background: #ea5a3d; /* Old browsers */
        background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
    }

<button id="btn" class="float circle btn-color">
            <div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
            </div>
            <div id="close-cross" style="position: absolute; top: 30px; left: 30px;display:none;">
                <svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
            </div>
        </button>

Answer 1

You can do something like in the example bellow.

bell_unfilled.svg (normal icon):

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_39_992)">
        <path d="M21.6938 16.3711L20.3911 14.2347C19.897 13.4242 19.6383 12.5008 19.6383 11.5571V8.51474C19.6412 4.36947 16.2123 1 11.9982 1C7.78411 1 4.35814 4.36947 4.35814 8.51474V11.5571C4.35814 12.5008 4.09936 13.4242 3.60531 14.2347L2.30256 16.3711C1.90556 17.0224 1.89674 17.8068 2.2761 18.4697C2.65545 19.1326 3.34653 19.5263 4.11994 19.5263H9.13391C9.09568 19.7174 9.05745 19.9084 9.05745 20.1053C9.05745 21.7003 10.3778 23 11.9982 23C13.6185 23 14.9389 21.7003 14.9389 20.1053C14.9389 19.9084 14.9007 19.7174 14.8625 19.5263H19.8765C20.6499 19.5263 21.338 19.1297 21.7203 18.4697C22.0997 17.8068 22.0908 17.0253 21.6938 16.3739V16.3711ZM13.7626 20.1053C13.7626 21.0634 12.9716 21.8421 11.9982 21.8421C11.0248 21.8421 10.2338 21.0634 10.2338 20.1053C10.2338 19.9055 10.2808 19.7116 10.3484 19.5263H13.648C13.7156 19.7116 13.7626 19.9055 13.7626 20.1053ZM20.6969 17.8995C20.5264 18.1947 20.2205 18.3684 19.8765 18.3684H4.12288C3.77882 18.3684 3.47298 18.1918 3.30242 17.8995C3.13479 17.6042 3.13774 17.2568 3.31418 16.9674L4.61693 14.8311C5.21978 13.8411 5.53738 12.7121 5.53738 11.56V8.51763C5.53738 5.0121 8.43696 2.16079 12.0011 2.16079C15.5653 2.16079 18.4649 5.0121 18.4649 8.51763V11.56C18.4649 12.7121 18.7825 13.8439 19.3853 14.8311L20.6881 16.9674C20.8645 17.2568 20.8704 17.6042 20.6999 17.8995H20.6969Z" fill="#000A1F"/>
    </g>
    <defs>
        <clipPath id="clip0_39_992">
            <rect width="20" height="22" fill="white" transform="translate(2 1)"/>
        </clipPath>
    </defs>
</svg>

bell_filled.svg (hovered icon):

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_1287_10637)">
        <path d="M9.26371 20.7436H13.7336C13.7336 21.8718 12.9318 23 11.4987 23C10.0655 23 9.26371 21.8718 9.26371 20.7436ZM20.7095 15.9769L19.4719 13.8954C19.0026 13.1056 18.7567 12.2031 18.7567 11.2864V8.32205C18.7595 4.28308 15.5021 1 11.4987 1C7.4953 1 4.24063 4.28308 4.24063 8.32205V11.2864C4.24063 12.2031 3.99478 13.1056 3.52544 13.8954L2.28783 15.9769C1.91068 16.6115 1.9023 17.3759 2.26268 18.0218C2.62307 18.6677 3.27959 19.0513 4.01434 19.0513H18.9802C19.715 19.0513 20.3687 18.6649 20.7319 18.0218C21.0923 17.3759 21.0839 16.6115 20.7067 15.9769H20.7095Z" fill="#000A1F"/>
    </g>
    <defs>
        <clipPath id="clip0_1287_10637">
            <rect width="19" height="22" fill="white" transform="translate(2 1)"/>
        </clipPath>
    </defs>
</svg>     

You can combine those 2 SVG files into a single SGV file, adding the content of the unfilled SVG icon into a <g class="first-icon"></g> and the content of the filled SVG icon into a <g class="second-icon"></g>, like this:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="first-icon">
        <g clip-path="url(#clip0_39_992)">
            <path d="M21.6938 16.3711L20.3911 14.2347C19.897 13.4242 19.6383 12.5008 19.6383 11.5571V8.51474C19.6412 4.36947 16.2123 1 11.9982 1C7.78411 1 4.35814 4.36947 4.35814 8.51474V11.5571C4.35814 12.5008 4.09936 13.4242 3.60531 14.2347L2.30256 16.3711C1.90556 17.0224 1.89674 17.8068 2.2761 18.4697C2.65545 19.1326 3.34653 19.5263 4.11994 19.5263H9.13391C9.09568 19.7174 9.05745 19.9084 9.05745 20.1053C9.05745 21.7003 10.3778 23 11.9982 23C13.6185 23 14.9389 21.7003 14.9389 20.1053C14.9389 19.9084 14.9007 19.7174 14.8625 19.5263H19.8765C20.6499 19.5263 21.338 19.1297 21.7203 18.4697C22.0997 17.8068 22.0908 17.0253 21.6938 16.3739V16.3711ZM13.7626 20.1053C13.7626 21.0634 12.9716 21.8421 11.9982 21.8421C11.0248 21.8421 10.2338 21.0634 10.2338 20.1053C10.2338 19.9055 10.2808 19.7116 10.3484 19.5263H13.648C13.7156 19.7116 13.7626 19.9055 13.7626 20.1053ZM20.6969 17.8995C20.5264 18.1947 20.2205 18.3684 19.8765 18.3684H4.12288C3.77882 18.3684 3.47298 18.1918 3.30242 17.8995C3.13479 17.6042 3.13774 17.2568 3.31418 16.9674L4.61693 14.8311C5.21978 13.8411 5.53738 12.7121 5.53738 11.56V8.51763C5.53738 5.0121 8.43696 2.16079 12.0011 2.16079C15.5653 2.16079 18.4649 5.0121 18.4649 8.51763V11.56C18.4649 12.7121 18.7825 13.8439 19.3853 14.8311L20.6881 16.9674C20.8645 17.2568 20.8704 17.6042 20.6999 17.8995H20.6969Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_39_992">
                <rect width="20" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
    <g class="second-icon">
        <g clip-path="url(#clip0_1287_10637)">
            <path d="M9.26371 20.7436H13.7336C13.7336 21.8718 12.9318 23 11.4987 23C10.0655 23 9.26371 21.8718 9.26371 20.7436ZM20.7095 15.9769L19.4719 13.8954C19.0026 13.1056 18.7567 12.2031 18.7567 11.2864V8.32205C18.7595 4.28308 15.5021 1 11.4987 1C7.4953 1 4.24063 4.28308 4.24063 8.32205V11.2864C4.24063 12.2031 3.99478 13.1056 3.52544 13.8954L2.28783 15.9769C1.91068 16.6115 1.9023 17.3759 2.26268 18.0218C2.62307 18.6677 3.27959 19.0513 4.01434 19.0513H18.9802C19.715 19.0513 20.3687 18.6649 20.7319 18.0218C21.0923 17.3759 21.0839 16.6115 20.7067 15.9769H20.7095Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_1287_10637">
                <rect width="19" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
</svg>     

Then you can have the hover effect in your HTML/CSS like:

svg .first-icon{
    opacity: 1;
}
svg .second-icon{
    opacity: 0;
}
svg:hover .first-icon{
    opacity: 0;
}
svg:hover .second-icon{
    opacity: 1;
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="first-icon">
        <g clip-path="url(#clip0_39_992)">
            <path d="M21.6938 16.3711L20.3911 14.2347C19.897 13.4242 19.6383 12.5008 19.6383 11.5571V8.51474C19.6412 4.36947 16.2123 1 11.9982 1C7.78411 1 4.35814 4.36947 4.35814 8.51474V11.5571C4.35814 12.5008 4.09936 13.4242 3.60531 14.2347L2.30256 16.3711C1.90556 17.0224 1.89674 17.8068 2.2761 18.4697C2.65545 19.1326 3.34653 19.5263 4.11994 19.5263H9.13391C9.09568 19.7174 9.05745 19.9084 9.05745 20.1053C9.05745 21.7003 10.3778 23 11.9982 23C13.6185 23 14.9389 21.7003 14.9389 20.1053C14.9389 19.9084 14.9007 19.7174 14.8625 19.5263H19.8765C20.6499 19.5263 21.338 19.1297 21.7203 18.4697C22.0997 17.8068 22.0908 17.0253 21.6938 16.3739V16.3711ZM13.7626 20.1053C13.7626 21.0634 12.9716 21.8421 11.9982 21.8421C11.0248 21.8421 10.2338 21.0634 10.2338 20.1053C10.2338 19.9055 10.2808 19.7116 10.3484 19.5263H13.648C13.7156 19.7116 13.7626 19.9055 13.7626 20.1053ZM20.6969 17.8995C20.5264 18.1947 20.2205 18.3684 19.8765 18.3684H4.12288C3.77882 18.3684 3.47298 18.1918 3.30242 17.8995C3.13479 17.6042 3.13774 17.2568 3.31418 16.9674L4.61693 14.8311C5.21978 13.8411 5.53738 12.7121 5.53738 11.56V8.51763C5.53738 5.0121 8.43696 2.16079 12.0011 2.16079C15.5653 2.16079 18.4649 5.0121 18.4649 8.51763V11.56C18.4649 12.7121 18.7825 13.8439 19.3853 14.8311L20.6881 16.9674C20.8645 17.2568 20.8704 17.6042 20.6999 17.8995H20.6969Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_39_992">
                <rect width="20" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
    <g class="second-icon">
        <g clip-path="url(#clip0_1287_10637)">
            <path d="M9.26371 20.7436H13.7336C13.7336 21.8718 12.9318 23 11.4987 23C10.0655 23 9.26371 21.8718 9.26371 20.7436ZM20.7095 15.9769L19.4719 13.8954C19.0026 13.1056 18.7567 12.2031 18.7567 11.2864V8.32205C18.7595 4.28308 15.5021 1 11.4987 1C7.4953 1 4.24063 4.28308 4.24063 8.32205V11.2864C4.24063 12.2031 3.99478 13.1056 3.52544 13.8954L2.28783 15.9769C1.91068 16.6115 1.9023 17.3759 2.26268 18.0218C2.62307 18.6677 3.27959 19.0513 4.01434 19.0513H18.9802C19.715 19.0513 20.3687 18.6649 20.7319 18.0218C21.0923 17.3759 21.0839 16.6115 20.7067 15.9769H20.7095Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_1287_10637">
                <rect width="19" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
</svg>

I've released an online tool that allows you to automaticaly generate combined SVG files in bulk (source code on GitHub).

Answer 2

Using vanilla JavaScript and CSS transform :

function toggleChatButton ()
{
  // Get the button
  const btn = document.getElementById( 'btn' );
  
  // Add click event
  btn.addEventListener( 'click', function () {
    
    // Toggle button class active 
    this.classList.toggle( 'active' );
    
  });
}

// Usage example
toggleChatButton();

/* Using the button active class to transform the divs inside */

#button-logo,
#close-cross
{
  transition: all .35s ease-in-out;
}

#btn.active #button-logo
{
  transform: rotate( 90deg ) scale( 0 );
  opacity: 0;
}

#btn:not( .active ) #close-cross
{
  transform: rotate( -90deg ) scale( 0 );
  opacity: 0;
}

/* Original code */

.float:focus {outline:0;}
    .float{
        width:60px;
        height:60px;
        background-color:#0C9;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        cursor: pointer;
    }

    .my-float{
        margin-top:22px;
    }

    .btn-color {
        border: none;
        background: #ea5a3d; /* Old browsers */
        background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
    }

<button id="btn" class="float circle btn-color">
            <div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
            </div>
            <div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
                <svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
            </div>
        </button>

Answer 3

To me it looks like something along these lines, a combination of rotation and fade.

.float:focus {
  outline: 0;
}

.float {
  width: 60px;
  height: 60px;
  background-color: #0C9;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  cursor: pointer;
}

.my-float {
  margin-top: 22px;
}

.btn-color {
  border: none;
  background: #ea5a3d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #e65a3d 0%, #4e5ecc 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc', GradientType=0);
  /* IE6-9 */
}

button #button-logo{transform:rotate(0deg) scale(1);opacity: 1; transition: all 0.1s ease-in-out;}
button #close-cross{transform:rotate(-90deg);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #button-logo{transform:rotate(90deg) scale(0.7);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #close-cross{transform:rotate(0deg);opacity: 1; transition: all 0.1s ease-in-out;}

<button id="btn" class="float circle btn-color">
            <div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
            </div>
            <div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
                <svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
            </div>
        </button>