Possibility to change a font awesome icon with transition - html

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,

Answer 1

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;
}
}
}

Answer 2

yes, its pretty simple after you see the solution but I was confused too which led me to this post.
css
#keyframes pulse {
0% {
color:transparent;
}
50% {
color: #065803;
}
75% {
color:rgb(113, 139, 0);
}
100% {
color: #065803;
}
0% {
color:rgb(189, 176, 1);
}
}
#linked{
font-size: 16.5rem;
color: white;
display: flex;
justify-content: center;
}
i{
animation: pulse 8s infinite ease;
} ```
HTML
<i id="linked" class="fab fa-linkedin"></i>
</a>
</div>
<div class="col-2-of-2">
<a href="projects.html" target="_blank">
<i id="linked" class="fas fa-code"></i>
</a>
```