How to make a get started animation using HTML and CSS

Posted By : Satyam Sharma | 30-Jul-2018

html5

Introduction

In this blog, I will show you how to make a get started animation using HTML and CSS. The word animation comes from an ancient Latin word "Anima" which means "Souls". So the animation is basically the soul of a website. Now many websites developed daily. So the competition becomes high and high. Mainly CSS animation makes your website different from other it makes a website stand out from other websites. So we need to make our website attractive so that the viewer should take the eye on our website. They should be in love with our website animations. So basically I think the first impression will be that when the viewer will open our website there should be some attractive animation comes which will be stuck user eyes on to the computer screen which forces the user to think that what will come next. For this purpose, I will make a get started animation which helps you to stick your viewer eye on to the screen.

Step: 1

For making get started animation first we have to make some HTML code for making a simple view that how it looks like. So here we wrote some HTML code you can copy this code and paste it over your website.

<body style="background-color: black;">
    <a href="#"> Get Started</a>
</body>

Step: 2

Now the second step gives some CSS for making it attractive. Give the background color and also another color of getting started circle as you would like here I have given color combination as I liked it. You can also set other font size and can also give another font family for making it more attractive.

 a {
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        text-decoration: none;
        transform: translate(-50%,-50%);
        padding: 85px 40px;
        background-color: #2196F3;
        border-radius: 50%;
        font-size: 19px;
        text-transform: uppercase;
       
    }

Step: 3

The third step is the give the animation for circle border color or you can also add some other animation as you like. Here I use the CSS animation property and give a @keyframe property and values to making it attractive.

a {
        animation: animate 2s linear infinite;
    }
    @keyframes animate {
        0%{ box-shadow: 0 0 0 0 rgba(33, 150, 243, 0),}
        30%{ box-shadow: 0 0 0 50px rgba(33, 150, 243, 0.5)}
        70%{ box-shadow: 0 0 30px 30px rgba(33, 150, 243, 0.4),0 0 15px 15px rgba(33, 150, 243, 0)}
        100%{ box-shadow: 0 0 30px 0 rgba(33, 150, 243, 0)}
        
    }

So here now I have made the animation. You can also make any other animation by using this approach. Here I have also given the link that how this animation looks like. Just copy the below link and paste it over your browser URL.

https://jsfiddle.net/184ak2tz/