Animation Experiment
How do I make an animation experiment?
Just a little spinning/throbbing loader animation to experiment with CSS3 animation. What is a animation experiment? How do you make a animation experiment? This script and codes were developed by Boylett on 20 August 2022, Saturday.
Animation Experiment - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation Experiment</title> <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! */ body { background: #254C31 }
body > div
{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; line-height: 100%; vertical-align: middle; margin: -50px 0 0 -50px; background: #346D45; border-radius: 50%; text-align: center; font-size: 0; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: spin;
}
body > div > i
{ content: ""; display: inline-block; width: 100%; height: 100%; background: #254C31; border-radius: 50%; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-name: throb;
}
@keyframes throb
{ 0% { margin: 20%; width: 10%; height: 10% } 50% { margin: 10%; width: 80%; height: 80% } 100% { margin: 20%; width: 10%; height: 10% }
}
@keyframes spin
{ 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <i></i>
</div>
</body>
</html>
Animation Experiment - Script Codes CSS Codes
body { background: #254C31 }
body > div
{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; line-height: 100%; vertical-align: middle; margin: -50px 0 0 -50px; background: #346D45; border-radius: 50%; text-align: center; font-size: 0; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: spin;
}
body > div > i
{ content: ""; display: inline-block; width: 100%; height: 100%; background: #254C31; border-radius: 50%; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-name: throb;
}
@keyframes throb
{ 0% { margin: 20%; width: 10%; height: 10% } 50% { margin: 10%; width: 80%; height: 80% } 100% { margin: 20%; width: 10%; height: 10% }
}
@keyframes spin
{ 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }
}
Developer | Boylett |
Username | boylett |
Uploaded | August 20, 2022 |
Rating | 3.5 |
Size | 2,218 Kb |
Views | 30,360 |
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 |
Notification Bell | 2,383 Kb |
Time Tracker Widget by Martin David | 3,547 Kb |
Particle Demo | 3,171 Kb |
Food Widget by Andreea Nicolaescu | 5,071 Kb |
Quote App Concept by Matthew Bird | 4,937 Kb |
Procreate File Viewer | 0 Kb |
Calendar Widget by Rogert Giza | 4,825 Kb |
Commit Button by Andrew Coyle | 3,236 Kb |
Music Player by Olia Gozha | 4,573 Kb |
Amusement Park Ticket | 2,032 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 |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Video mute | Leon9208 | 2,131 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Android Logo with HTML and CSS | Wifi | 2,000 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Loading animation | Codeams | 2,408 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 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!