Cursor Typing Animation is something which changes styles of an element. We can change the properties of CSS as we want according to the requirements. To use CSS animation, you must first specify some key frames for the animation.
Firstly we take
doctype tag which is used to defines the document type then in that we open html tag which is used to Define an HTML
document.lang and class are the attributes used in html tag. Next we take head tag which is used for defining information about the document. Meta is used for defining metadata(data about data) about an HTML document.
In the body part Defines the document’s
h1 tag we used a class “
cd-headline clip is-full-width” for defining heading.
Inside that we use span tag which defines a section in a document. Span tag prints “my favorite food is” then by using the class called
<section class="cd-intro"> <h1 class="cd-headline clip is-full-width"> <span>My favourite food is</span> <span class="cd-words-wrapper"> <b class="is-visible">Pizza</b> <b>Biryani</b> <b>Burger</b> </span> </h1> </section>
Inside span tag we again declare another tag called
bold by using class
is-visible which is declared inside the
is-visible class is used styles like
opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s;
with this animation is created. In the animation we get an alternatives like pizza, burger, biryani as our favorite food.
My favorite food is pizza(or)Burger(or)Biryani.