Animation test
How do I make an animation test?
What is a animation test? How do you make a animation test? This script and codes were developed by Yuri Morini on 24 November 2022, Thursday.
Animation test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="backToTop show" href="javascript:void(0);"> <span class="arrows"> <span class="icon-arrowup"></span> <span class="icon-arrowup"></span> </span>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Animation test - Script Codes CSS Codes
.backToTop.show { opacity: 1; top: auto;
}
.backToTop { background-color: #E02D2B; border-radius: 50%; bottom: 80px; display: block; height: 62px; opacity: 0; position: fixed; left: 30px; text-decoration: none; top: 30px; transition-duration: 0.3s; transition-property: opacity, right, bottom, border-radius, height, width, background-color; width: 62px; z-index: 100;
}
.backToTop .arrows { color: #FFFFFF; display: block; font-size: 32px; opacity: 1; padding-top: 0; text-align: center; transition-duration: 0.3s; transition-property: opacity, padding, transform; padding-top: 0; position:absolute; top:20px; width:100%; text-align:center;
}
.icon-arrowup:before { content: "^";
}
.backToTop .arrows .icon-arrowup { display: block; font-size: 18px; margin-bottom: -8px; margin-left: 0;
}
[class*="icon-"] { font-family: 'icomoon' !important; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-transform: none;
}
/* DA QUI ************************************************************************/
.backToTop:hover .arrows { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-animation: 1s ease infinite BackToTop; animation: 1s ease infinite BackToTop;
}
@-moz-keyframes BackToTop {
0% { transform: 20px;
}
25% { top:10px;
}
100% { top:30px;
}
}
@-webkit-keyframes BackToTop {
0% { top:20px;
}
25% { top:10px;
}
100% { top:30px;
}
}
/*.backToTop .arrows { transition-property: opacity, padding, transform; padding-top: 0; position:absolute; top:20px; width:100%; text-align:center;
}*/
Developer | Yuri Morini |
Username | yurimorini |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 1,998 Kb |
Views | 18,216 |
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!
Name | Size |
Fixed rotated square loader test | 1,657 Kb |
Extra canvas menu | 2,183 Kb |
Albino button | 1,505 Kb |
SVG clipped path accordion | 3,035 Kb |
Grid Layout changer | 2,314 Kb |
Line spinner | 1,736 Kb |
Foundation Reveal error | 2,048 Kb |
A Pen by Yuri Morini | 2,464 Kb |
Testing vertical flex | 2,131 Kb |
Test overlay | 1,907 Kb |
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!
Name | Username | Size |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Cool audio | Bigliam | 1,868 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!