typing effect using html and css | tips & tricks | animation | web design and development tutorials

Published: 16 November 2019
on channel: Web Learners Hub

In this tutorial, We are going to learn how to create a typewriting effect using only html and css,
Step 1, We want to create a html file ( index.html ). then create a css file (style.css).
Step 2, write a html, link the style.css file in the index.html file, and in the body tag, create a h1 tag and inside the html tag, write a text what you want, i put the text "Web Learners Hub.".this text is 17 characters length.
Step 3, write a css, in the style.css file, first we put the style for body tag, in this video, i want the body as flex container, so i put the display:flex, and the contents inside the body tag are to aligned center horizontally and vertically, so jusitfy-content:center, and align-items : center, i want body to the device's height so height:100vh, vh is the unit based on the device's height.

step 4, Styling the h1 tag, first we want the text inside the h1 should be monospace , so, font-family:monospace, and font-size:80px, then border-right is for cursor that is going to be act as a cursor with blinking animation ( border:2px solid transparent ).

Step 5, create two keyframes, typing and blink.
typing is for typewriting effect blink is for cursor blinking.

in the typing animation,
0% to 20%, width:0; because, some time nothing happens
80% to 100%, width:17ch, because, after the typing some time nothing happens,
in between the 20% and 80%, the typing happens.

in the blinking animation,
100% border-color:#fff, default color is set to 0% automatically. the default color is transparent.

step 6, assign the animations to the h1 tag,
animation : typing, duration 4s, timing function steps(17) ( animation works as 17 steps because there are 17 characters ) ease (Default), alternate is for after complete the animation reversing the animation back.

thanks for watching!

Follow as on Facebook, / weblearnershub

On this page of the site you can watch the video online typing effect using html and css | tips & tricks | animation | web design and development tutorials with a duration of hours minute second in good quality, which was uploaded by the user Web Learners Hub 16 November 2019, share the link with friends and acquaintances, this video has already been watched 55 times on youtube and it was liked by 2 viewers. Enjoy your viewing!

2,622