How to create a cursor typing animation using css

Animation

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.

STEPS

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 body in 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 cd-words-wrapper.

HTML

<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 cd-words-wrapper 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.

OUTPUT:

My favorite food is pizza(or)Burger(or)Biryani.

Leave a Reply

Your email address will not be published. Required fields are marked *