Это то, как я понял?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
.button {
display: inline-block;
padding: 0 20px;
border-radius: 50px;
background: orange;
box-shadow: 0 6px 1px #da8b3e;
cursor: pointer;
font-family: sans-serif;
user-select: none;
}
.fas {
background: blue;
padding: 22px 20px;
border-radius: 50%;
background: #fff;
color: orange;
/* transition: 0.34s linear; Убрал */
}
.fase { /* Добавил */
transition: 0.34s linear;
}
.pulse {
animation: pulse 0.2s linear infinite;
}
.pulse .fas {
display: inline-block;
}
.effect {
transform: rotate(360deg);
}
@keyframes pulse {
0% {
transform: rotate(-2deg);
}
100% {
transform: rotate(2deg);
}
}
.button span,
.button .fas {
user-select: none;
}
</style>
<body>
<div class="button">
<p>
<span>Вызвать мастера</span>
<i class="fas fa-broom"></i>
</p>
</div>
<script>
document.querySelector(".button").onclick = handle;
function handle() {
this.classList.add("pulse");
// Важен порядок добавлени классов
document.querySelector(".fas").classList.add("fase"); // Добавил
document.querySelector(".fas").classList.add("effect");
pulseOut();
effectOut() // Добавил
}
function pulseOut() {
setTimeout(function () {
document.querySelector(".button").classList.remove("pulse");
}, 200);
}
function effectOut() { // Добавил
setTimeout(function () {
// Важен порядок снятия классов
document.querySelector(".fas").classList.remove("fase");
document.querySelector(".fas").classList.remove("effect");
}, 340);
}
</script>
</body>
