Bloc hover animation

Developer
Sébastien Lombard
Size
3,452 Kb
Views
24,288
  1. Bloc hover animation Previews
  2. Bloc hover animation HTML Codes
  3. Bloc hover animation CSS Codes

How do I make an bloc hover animation?

Y axis bloc translation + top border animation + loop arrow animation.. What is a bloc hover animation? How do you make a bloc hover animation? This script and codes were developed by Sébastien Lombard on 16 September 2022, Friday.

Bloc hover animation Previews
IQ Test

Bloc hover animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bloc hover animation</title> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_sebl_p.css'>
<link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="title"> <h1><i class="ion-arrow-up-a"></i> Hover animation</h1> <p>Y axis bloc translation + top border animation + loop arrow animation.</p>
</header>
<div class="anim"> <div class="up ion-arrow-up-a"></div> <h1>HOVER ANIMATION</h1> Y axis bloc translation + top border animation + loop arrow animation.
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Bloc hover animation - Script Codes CSS Codes

html,
body { height: 100%;
}
body { font-family: 'Open Sans', sans-serif;
}
.anim { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; margin: 0 auto; text-align: center; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; -webkit-transition: all 200ms ease; transition: all 200ms ease; background-color: #ecf0f1; padding: 2rem; width: 20rem; border-top: 4px solid transparent; cursor: pointer;
}
.anim .up { -moz-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #bdc3c7; width: 7rem; height: 7rem; margin: 0 auto; margin-bottom: 1rem; color: #ecf0f1; font-size: 4rem; line-height: 7rem; overflow: hidden;
}
.anim:hover { -moz-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); border-top: 3px solid #3498db;
}
.anim:hover .up { -moz-transition: all 300ms ease; -o-transition: all 300ms ease; -webkit-transition: all 300ms ease; transition: all 300ms ease; background-color: #3498db;
}
.anim:hover .up:before { -moz-animation: up 1s infinite; -webkit-animation: up 1s infinite; animation: up 1s infinite;
}
.anim h1 { font-weight: bold; margin-bottom: 0.5rem;
}
@keyframes up { 0% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } 50% { -moz-transform: translateY(-7rem); -ms-transform: translateY(-7rem); -webkit-transform: translateY(-7rem); transform: translateY(-7rem); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 51% { -moz-transform: translateY(7rem); -ms-transform: translateY(7rem); -webkit-transform: translateY(7rem); transform: translateY(7rem); } 100% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
}
@-webkit-keyframes up { 0% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } 50% { -moz-transform: translateY(-7rem); -ms-transform: translateY(-7rem); -webkit-transform: translateY(-7rem); transform: translateY(-7rem); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 51% { -moz-transform: translateY(7rem); -ms-transform: translateY(7rem); -webkit-transform: translateY(7rem); transform: translateY(7rem); } 100% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
}
@-moz-keyframes up { 0% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } 50% { -moz-transform: translateY(-7rem); -ms-transform: translateY(-7rem); -webkit-transform: translateY(-7rem); transform: translateY(-7rem); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 51% { -moz-transform: translateY(7rem); -ms-transform: translateY(7rem); -webkit-transform: translateY(7rem); transform: translateY(7rem); } 100% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
}
@-o-keyframes up { 0% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } 50% { -moz-transform: translateY(-7rem); -ms-transform: translateY(-7rem); -webkit-transform: translateY(-7rem); transform: translateY(-7rem); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 51% { -moz-transform: translateY(7rem); -ms-transform: translateY(7rem); -webkit-transform: translateY(7rem); transform: translateY(7rem); } 100% { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
}
Bloc hover animation - Script Codes
Bloc hover animation - Script Codes
Home Page Home
Developer Sébastien Lombard
Username SebL
Uploaded September 16, 2022
Rating 4.5
Size 3,452 Kb
Views 24,288
Do you need developer help for Bloc 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!

Sébastien Lombard (SebL) Script Codes
Name
Super quick responsive parametric grid generator with SASS
ES6 Class to get query params in string url or array of string urls
Perspective modal window
Responsive grid template editor concept
SoundCloud Mini player with css record animation
Handles
Super simple CSS custom checkbox
Simple 2 sides title animation
NgServerMessages
Create amazing blog posts 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!