Amadurou Logo Animation

Developer
Rafael Abensur
Size
3,208 Kb
Views
12,144
  1. Amadurou Logo Animation Previews
  2. Amadurou Logo Animation HTML Codes
  3. Amadurou Logo Animation CSS Codes

How do I make an amadurou logo animation?

What is a amadurou logo animation? How do you make a amadurou logo animation? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

Amadurou Logo Animation Previews
IQ Test

Amadurou Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Amadurou Logo Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="top-header" role="navigation"> <a id="logo-container" href="/" class="top-header__logo"> <svg width="30" height="30" viewBox="0 0 512 512" class="top-header__icon"> <path class="top-header__icon-path" d="m366 201c0-5-2-9-6-13c-3-3-8-5-13-5c-32 0-63 5-90 14c-28 9-53 22-75 38c-21 16-44 37-67 63c-3 4-5 8-5 13c0 5 2 9 5 13c4 3 8 5 13 5c5 0 9-2 13-5c5-5 12-12 21-21c9-9 15-15 19-18c26-24 52-41 77-51c25-10 55-15 89-15c5 0 10-1 13-5c4-4 6-8 6-13z m146-56c0 18-2 36-6 55c-8 42-26 79-52 109c-27 30-61 56-103 77c-40 20-82 31-125 31c-28 0-55-5-81-14c-3-1-12-5-26-12c-13-7-23-10-27-10c-3 0-7 3-11 9c-5 6-9 12-13 20c-4 7-9 14-15 20c-6 6-12 9-17 9c-6 0-11-1-15-3c-4-2-7-5-9-7c-2-3-4-7-7-12c-1-1-1-2-2-3c-1-2-1-3-2-3c0-1 0-2-1-3c0-1 0-2 0-4c0-6 3-13 9-21c6-7 12-13 19-18c7-6 14-11 20-16c6-6 9-11 9-14c0-1-2-5-4-11c-3-6-5-11-5-13c-2-9-3-19-3-29c0-22 5-43 13-63c8-20 19-38 34-53c14-15 30-28 49-40c18-11 37-20 58-27c10-3 24-6 41-7c17-2 35-2 52-3c17 0 34-1 51-1c17-1 32-4 46-7c14-4 25-9 33-16l8-9c0 0 3-3 9-8c5-5 8-7 7-6c0 2 3 0 11-4c7-5 11-5 12-1c8 0 14 4 20 13c6 8 11 19 14 32c3 12 5 24 7 35c1 11 2 20 2 28z"></path> </svg> <span class="top-header__name">amadurou</span> </a>
</nav>
</body>
</html>

Amadurou Logo Animation - Script Codes CSS Codes

.top-header { background: #c6ecbe !important; text-align: center; height: 4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center;
}
.top-header__logo { text-decoration: none; position: relative; top: -2px; left: -20px;
}
.top-header__icon { -webkit-animation-duration: 1800ms; animation-duration: 1800ms; -webkit-animation-name: fall; animation-name: fall; fill: #47ad31; height: 1.75rem; opacity: 1; -webkit-transform: rotateY(180deg) rotate(20deg) translateY(4px) translateX(0); transform: rotateY(180deg) rotate(20deg) translateY(4px) translateX(0); width: 1.75rem;
}
.top-header__name { -webkit-animation-delay: 1500ms; animation-delay: 1500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-name: fade-in; animation-name: fade-in; color: #444; font-size: 2rem; margin-left: 0.2rem; opacity: 0; position: relative; top: 2px; text-decoration: none;
}
@-webkit-keyframes fall { 0% { opacity: 0; -webkit-transform: rotateY(180deg) rotate(5deg) translateY(-10px) translateX(10px); transform: rotateY(180deg) rotate(5deg) translateY(-10px) translateX(10px); } 15% { opacity: 0; -webkit-transform: rotateY(180deg) rotate(20deg) translateY(-10px) translateX(0); transform: rotateY(180deg) rotate(20deg) translateY(-10px) translateX(0); } 33% { opacity: 0.33; -webkit-transform: rotateY(180deg) rotate(35deg) translateY(-5px) translateX(-10px); transform: rotateY(180deg) rotate(35deg) translateY(-5px) translateX(-10px); } 66% { opacity: 0.66; -webkit-transform: rotateY(180deg) rotate(5deg) translateY(0) translateX(10px); transform: rotateY(180deg) rotate(5deg) translateY(0) translateX(10px); } 100% { opacity: 1; -webkit-transform: rotateY(180deg) rotate(20deg) translateY(4px) translateX(0); transform: rotateY(180deg) rotate(20deg) translateY(4px) translateX(0); }
}
@keyframes fall { 0% { opacity: 0; -webkit-transform: rotateY(180deg) rotate(5deg) translateY(-10px) translateX(10px); transform: rotateY(180deg) rotate(5deg) translateY(-10px) translateX(10px); } 15% { opacity: 0; -webkit-transform: rotateY(180deg) rotate(20deg) translateY(-10px) translateX(0); transform: rotateY(180deg) rotate(20deg) translateY(-10px) translateX(0); } 33% { opacity: 0.33; -webkit-transform: rotateY(180deg) rotate(35deg) translateY(-5px) translateX(-10px); transform: rotateY(180deg) rotate(35deg) translateY(-5px) translateX(-10px); } 66% { opacity: 0.66; -webkit-transform: rotateY(180deg) rotate(5deg) translateY(0) translateX(10px); transform: rotateY(180deg) rotate(5deg) translateY(0) translateX(10px); } 100% { opacity: 1; -webkit-transform: rotateY(180deg) rotate(20deg) translateY(4px) translateX(0); transform: rotateY(180deg) rotate(20deg) translateY(4px) translateX(0); }
}
@-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }
}
Amadurou Logo Animation - Script Codes
Amadurou Logo Animation - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 3,208 Kb
Views 12,144
Do you need developer help for Amadurou Logo 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!

Rafael Abensur (abensur) Script Codes
Name
Food Seasons
Pocker Mortys dataviz
Isocubes
Chart tooltip example
Responsive SVG thermometer
Divinding circle
Algorithm practice
D3.js with CSS sprites
React Progress Bar
Roundout Ribbon
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!