Interesting Hover Animation

Developer
Chris Burnell
Size
2,686 Kb
Views
38,456
  1. Interesting Hover Animation Previews
  2. Interesting Hover Animation HTML Codes
  3. Interesting Hover Animation CSS Codes

How do I make an interesting hover animation?

A friend was describing a cool hover effect he had in mind to me. Unable to contain my interest, I decided to mock it up. Check out forks of this pen for his full mockup.. What is a interesting hover animation? How do you make a interesting hover animation? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

Interesting Hover Animation Previews
IQ Test

Interesting Hover Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interesting Hover Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%; }
body { position: relative; z-index: 1; }
a { display: block; position: absolute; top: 50%; left: 50%; width: 160px; height: 40px; font: 400 24px/40px "Helvetica Neue", Arial, sans-serif; margin: -20px 0 0 -80px; text-align: center; text-decoration: none; color: blue; overflow: hidden; -webkit-transition: color .5s; transition: color .5s; -webkit-animation: normalEffect .5s 1; animation: normalEffect .5s 1;
}
a:hover { color: white; -webkit-animation: hoverEffect .25s 1; animation: hoverEffect .25s 1;
}
a:after { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; content: ""; display: block; background: blue; z-index: -1; -webkit-animation: afterNormalSlide .5s 1; animation: afterNormalSlide .5s 1;
}
a:hover:after { top: 0; -webkit-animation: afterHoverSlide .5s 1; animation: afterHoverSlide .5s 1;
}
@keyframes normalEffect { 0% { opacity: 0; -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { opacity: 1; -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); transform: rotateX(360deg); }
}
@keyframes hoverEffect { 0% { line-height: 40px; } 70% { line-height: 32px; } 100% { line-height: 40px; }
}
@keyframes afterNormalSlide { 0% { top: 0; } 100% { top: -100%; }
}
@keyframes afterHoverSlide { 0% { top: 100%; } 100% { top: 0; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#">Hover me</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Interesting Hover Animation - Script Codes CSS Codes

html, body { height: 100%; }
body { position: relative; z-index: 1; }
a { display: block; position: absolute; top: 50%; left: 50%; width: 160px; height: 40px; font: 400 24px/40px "Helvetica Neue", Arial, sans-serif; margin: -20px 0 0 -80px; text-align: center; text-decoration: none; color: blue; overflow: hidden; -webkit-transition: color .5s; transition: color .5s; -webkit-animation: normalEffect .5s 1; animation: normalEffect .5s 1;
}
a:hover { color: white; -webkit-animation: hoverEffect .25s 1; animation: hoverEffect .25s 1;
}
a:after { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; content: ""; display: block; background: blue; z-index: -1; -webkit-animation: afterNormalSlide .5s 1; animation: afterNormalSlide .5s 1;
}
a:hover:after { top: 0; -webkit-animation: afterHoverSlide .5s 1; animation: afterHoverSlide .5s 1;
}
@keyframes normalEffect { 0% { opacity: 0; -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { opacity: 1; -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); transform: rotateX(360deg); }
}
@keyframes hoverEffect { 0% { line-height: 40px; } 70% { line-height: 32px; } 100% { line-height: 40px; }
}
@keyframes afterNormalSlide { 0% { top: 0; } 100% { top: -100%; }
}
@keyframes afterHoverSlide { 0% { top: 100%; } 100% { top: 0; }
Interesting Hover Animation - Script Codes
Interesting Hover Animation - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 3
Size 2,686 Kb
Views 38,456
Do you need developer help for Interesting Hover Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Burnell (chrisburnell) Script Codes
Name
Globule Bleu Jobs Page Anchor Rollover Effect
The power of transform for centering
Infinite Square
Simple CSS Checkbox
Message Types
Interaction Jazz
Modal Container without JS
Square Illusion
Student Charter Demo for City University
Zoomy Anchor Thing
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!