Font Awesome icon animation on hover

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
    <h2>Font Awesome icon animation on hover</h2>
    <div class="icon-container">
        <i class="fa fa-heartbeat"></i>
    </div>
</body>
<style>
    body {
        background-color: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0;
    }

.icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

.icon-container i {
        font-size: 40px;
        transition: transform 0.3s ease-in-out;
    }

.icon-container:hover i {
        animation: heartBeat 0.6s infinite;
    }

@keyframes heartBeat {
        0% {
            transform: scale(1);
        }

20% {
            transform: scale(1.2);
        }

40% {
            transform: scale(1);
        }

60% {
            transform: scale(1.2);
        }

80% {
            transform: scale(1);
        }

100% {
            transform: scale(1);
        }
    }
</style>

</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
    <h2>Font Awesome icon animation on hover</h2>
    <div class="icon-container">
        <i class="fa fa-heartbeat"></i>
    </div>
</body>
<style>
    body {
        background-color: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0;
    }
​
    .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
​
    .icon-container i {
        font-size: 40px;
        transition: transform 0.3s ease-in-out;
    }
​
    .icon-container:hover i {
        animation: heartBeat 0.6s infinite;
    }
​
    @keyframes heartBeat {
        0% {
            transform: scale(1);
        }
​
        20% {
            transform: scale(1.2);
        }
​
        40% {
            transform: scale(1);
        }
​
        60% {
            transform: scale(1.2);
        }
​
        80% {
            transform: scale(1);
        }
​
        100% {
            transform: scale(1);
        }
    }
</style>
​
</html>