Possibility to change a font awesome icon with transition

Question

No, I have no code to demonstrate but I have been wondering: Is it possible to change a font-awesome logo with just transition? Such as: Change the class? I did a little bit of research on w3schools and How can create transition effect in font awesome icon found this link aswell, but they didn't really help and this question has been with me for a long time. so, the question is: Is it possible to make a logo change (font awesome) with css transition or do I need javascript for it? in case the question shouldn't be posted here. please tell me where it should so I can move it.

Cheers,

Solution

Here you go:

This has been done here: https://codepen.io/toaster99/pen/BpgzQR

HTML:

<div id="container">
  <div class="button">
          <div class="icons">
            <i class="fa fa-apple icon-default"></i>
            <i class="fa fa-arrow-circle-down icon-hover"></i>
          </div>
          Download
  </div>
</div>

CSS:

#attribution {
  position: fixed;
  right: 10px;
  bottom: 10px;
  color: #FE8989;
  z-index: 100;
  font-weight: bold;
  cursor: pointer;

    a {
    color: inherit;
    text-decoration: inherit;
      }
}


#container {
  background: linear-gradient(#8affff,#80eded);
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.button {
    position: relative;

  margin-bottom: 40px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    background: #FE8989;
        box-shadow:  0px 0px 0 0px rgba(0,0,0,0);
    border-radius: 50px;

    width: 25.25rem;
    padding: 1rem 0;

    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 2.75rem;
    color: white;

    cursor: pointer;

    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    .icons {
        position: relative;

        display: flex;
        justify-content: center;
        align-items: center;

        margin: 0 2.3rem 0 0;
        width: 1.25rem;
        height: 2.6rem;

        i {
            position: absolute;
            top: 0;
            left: 0;

            display: block;
        }
        .icon-default {
            transition: opacity .3s, transform .3s;
        }

        .icon-hover {
            transition: opacity .3s, transform .3s;
            transform: rotate(-180deg) scale(.5);
            opacity: 0;
        }
    }

    &:hover {
        transform: scale(1.2);
        box-shadow:  20px 15px rgba(0,0,0,0.15);
        .icon-hover {
            transform: rotate(0deg) scale(1);
            opacity: 1;
        }
        .icon-default {
            transform: rotate(180deg) scale(.5);
            opacity: 0;
        }
    }
}

Comments

[Admin]

Yep, you did the job with the code haha. I can accept ur answer in 4 min. Thank you for the help :) appreciate it