Demo for Notification Button Animation

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body {
    height: 100%;
    overflow-x: hidden;
    margin: 0 auto;
}

.my-btn, .my-btn-border, .btn-bell {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.my-btn {
    height: 60px;
    width: 60px;
    box-shadow: -1px 2px 10px #999;
    background: #ef7575;
    animation-name: col;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.my-btn-border {
    height: 59px;
    width: 59px;
    border: 1px solid #ef7575 !important;
    animation-name: bord-pop;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;
}

.btn-bell {
    color: white;
    font-size: 20px;
    animation-name: bell-ring;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes bord-pop {
    0% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0.1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}

@keyframes col {
    0% {
        transform: scale(1) translate(0,0);
    }

    10% {
        transform: scale(1.1) translate(0,0);
    }

    75% {
        transform: scale(1) translate(0,0);
    }

    100% {
        transform: scale(1) translate(0,0);
    }
}

@keyframes bell-ring {
    0% {
        transform: translate(-50%, -50%);
    }

    5%, 15% {
        transform: translate(-50%, -50%) rotate(25deg);
    }

    10%, 20% {
        transform: translate(-50%, -50%) rotate(-25deg);
    }

    25% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
</style>

</head>
<body>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<div class="my-btn">
        <div class="my-btn-border"></div>
        <i class="fas fa-bell btn-bell"></i>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(function () {
    // check this out on a mobile device.
    if (/Mobi/.test(navigator.userAgent)) {
        setInterval(function () {
            navigator.vibrate();
        }, 3000);
    }
});
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Other Codes

Several Notification Boxes with Time Bar

Below are several codes of these notifications along with the time bar that you can customize them for yourself with the desired settings.

Form Control Notifications

Inline and box notifications for controlling forms entered values.

Notification Icon with Hover Animation

It is a notification icon in the form of a ringtone that has animation in Hover mode and shakes. This code is pure CSS.

Notification UI Design

This code is pure CSS and there are 4 types of alert notifications with different topics, along with separating line animation and light animation on . . .