Nerd For Tech
Published in

Nerd For Tech

Web Animations with HTML and CSS

Photo by Florian Olivo on Unsplash
Screenshot by author
  • animation-timing-function: Defines the speed curve or pace of the animation. You can specify the timing with the following predefined timing options: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit.
  • animation-delay: This property defines when the animation will start. The value is defined in seconds (s) or milliseconds (ms).
  • animation-iteration-count: This property specifies the number of times an animation should be played.
  • animation-direction: This CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
  • animation-fill-mode: This property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
  • animation-play-state: This property specifies whether the animation is running or paused.
Example using animation properties
div {width: 100px;height: 100px;background-color: red;position: relative;animation-name: example;animation-duration: 4s;animation-delay: 2s;}@keyframes example {0% {background-color:red; left:0px; top:0px;}25% {background-color:yellow; left:200px; top:0px;}50% {background-color:blue; left:200px; top:200px;}75% {background-color:green; left:0px; top:200px;}100% {background-color:red; left:0px; top:0px;}}
:hover {
css declarations;
Link hover example
a.ex1:hover {color: red;}a.ex2:hover {font-size: 150%;}a.ex3:hover {background: yellow;}a.ex4:hover {font-family: cursive;}a.ex5:hover {text-decoration: none;}
<p><a class=”ex1" href=”default.asp”>This link changes color</a></p><p><a class=”ex2" href=”default.asp”>This link changes font-size</a></p><p><a class=”ex3" href=”default.asp”>This link changes background-color</a></p><p><a class=”ex4" href=”default.asp”>This link changes font-family</a></p><p><a class=”ex5" href=”default.asp”>This link changes text-decoration</a></p>
Link hover example 2 (Navigation bar link hover pattern)
ul li{list-style: none;}.navigation-bar{width:100%;height:100px;background: rgba(117, 113, 113,1);padding: 0 5px;font-size: 25px;font-weight: 700;padding-top: 10px;}.navigation-bar li{margin: 5px 5px;display: inline-block;list-style: none;}.navigation-bar li a{color:white;text-decoration: none;}.cool-link::after{content: ‘’;display: block;width: 0px;height: 2px;background-color: #fff;transition: width .3s;}.cool-link:hover::after{width: 100%;transition: width .3s;}.nav-right{width: 55%;font-family: ‘Lobster Two’, cursive;float: right;}.nav-right ul li {padding: 0px 2px; text-align: center;}.nav-right ul li:last-child{border-right: none;}
<div class=”navigation-bar”><div class=”nav-right”><ul><li><a href=”#” class=”cool-link”>Home</a></li><li><a href=”#” class=”cool-link”>About Us</a></li><li><a href=”#” class=”cool-link”>Portfolio</a></li><li><a href=”#” class=”coollink”>Mobile Apps</a></li><li><a href=”#” class=”cool-link”>Contact Us</a></li><li><a href=”#” class=”cool-link”>Sign Up</a></li></ul></div><! — nav-right -></div><! — navigation-bar ->
Image hover example
.social ul{list-style: none;}.social ul li{display:inline-block;padding: 5px 5px 5px 20px ;}.social ul li img:hover{transform: scale(1.2);}
<div class=”social”><ul><li><a href=”#”><img src=”facebook.png” width=”30px” height=”30px” ></a></li><li><a href=”#”><img src=”twitter.png” width=”30px” height=”30px” ></a></li><li><a href=”#”><img src=”linkedin.png” width=”30px” height=”30px” ></a></li><li><a href=”#”><img src=”instagram.png” width=”30px” height=”30px” ></a></li><li><a href=”#”><img src=”youtube.png” width=”30px” height=”30px” ></a></li></ul></div><! — social ->
Fade in tooltip (animation)
.tooltip {position: relative;display: inline-block;border-bottom: 2px dotted black;color:deepskyblue;}.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;bottom: 100%;left: 50%;margin-left: -60px;/* Fade in tooltip — takes 1 second to go from 0% to 100% opac: */opacity: 0;transition: opacity 1s;}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
<div class=”tooltip”>Hover over me<span class=”tooltiptext”>Tooltip text</span></div>



NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store