Minion Animation

Developer
Andy Tran
Size
3,208 Kb
Views
4,048
  1. Minion Animation Previews
  2. Minion Animation HTML Codes
  3. Minion Animation CSS Codes

How do I make an minion animation?

A quick little minion animation. . What is a minion animation? How do you make a minion animation? This script and codes were developed by Andy Tran on 28 January 2023, Saturday.

Minion Animation Previews
IQ Test

Minion Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minion Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="message">Baa-BaBa-NaNa</div>
<div class="minion"> <div class="strap"></div> <div class="goggle"></div> <div class="eyeball"></div>
</div>
</body>
</html>

Minion Animation - Script Codes CSS Codes

.message { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 60px; color: #f5e050; font-family: 'Roboto', sans-serif; font-size: 48px; line-height: 60px; text-align: center; text-shadow: 0 2px 0 #d3ba0c; text-transform: uppercase;
}
.minion { border-radius: 6px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.minion:before, .minion:after { content: ''; position: absolute; top: 0; display: block; background: #f5e050; width: 100%; height: 50%; -webkit-animation: head 8s ease; animation: head 8s ease;
}
.minion:after { top: auto; bottom: 0;
}
.strap { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #222; width: 100%; height: 40px; -webkit-transition: 0.3s ease; transition: 0.3s ease; -webkit-animation: strap 8s ease; animation: strap 8s ease;
}
.goggle { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #ffffff; width: 80px; height: 80px; border-radius: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-animation: goggle 8s ease; animation: goggle 8s ease;
}
.goggle:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #f5e050; width: 50px; height: 50px; border-radius: 100%; margin: auto;
}
.eyeball { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #ffffff; width: 30px; height: 30px; border-radius: 100%; overflow: hidden; -webkit-animation: eyeball 8s ease; animation: eyeball 8s ease;
}
.eyeball:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: rgba(0, 0, 0, 0.3); width: 22px; height: 22px; border-radius: 100%;
}
.eyeball:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #000000; width: 12px; height: 12px; border-radius: 100%; -webkit-animation: ball 8s ease; animation: ball 8s ease;
}
@-webkit-keyframes head { 0% { height: 0%; } 10% { height: 50%; }
}
@keyframes head { 0% { height: 0%; } 10% { height: 50%; }
}
@-webkit-keyframes strap { 0% { width: 0%; height: 5px; } 10% { width: 0%; height: 5px; } 20% { width: 100%; height: 5px; } 30% { height: 40px; }
}
@keyframes strap { 0% { width: 0%; height: 5px; } 10% { width: 0%; height: 5px; } 20% { width: 100%; height: 5px; } 30% { height: 40px; }
}
@-webkit-keyframes goggle { 0% { -webkit-transform: scale(0); transform: scale(0); } 20% { -webkit-transform: scale(0); transform: scale(0); } 30% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes goggle { 0% { -webkit-transform: scale(0); transform: scale(0); } 20% { -webkit-transform: scale(0); transform: scale(0); } 30% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes eyeball { 0% { height: 0px; } 30% { height: 0px; } 40% { height: 30px; } 50% { height: 30px; } 55% { height: 5px; } 60% { height: 30px; } 65% { height: 5px; } 70% { height: 30px; } 85% { height: 10px; } 90% { height: 10px; } 95% { height: 30px; }
}
@keyframes eyeball { 0% { height: 0px; } 30% { height: 0px; } 40% { height: 30px; } 50% { height: 30px; } 55% { height: 5px; } 60% { height: 30px; } 65% { height: 5px; } 70% { height: 30px; } 85% { height: 10px; } 90% { height: 10px; } 95% { height: 30px; }
}
@-webkit-keyframes ball { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 60% { -webkit-transform: translateX(0); transform: translateX(0); } 65% { -webkit-transform: translateX(5px); transform: translateX(5px); } 70% { -webkit-transform: translateX(0); transform: translateX(0); } 75% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes ball { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 60% { -webkit-transform: translateX(0); transform: translateX(0); } 65% { -webkit-transform: translateX(5px); transform: translateX(5px); } 70% { -webkit-transform: translateX(0); transform: translateX(0); } 75% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 80% { -webkit-transform: translateX(0); transform: translateX(0); }
}
Minion Animation - Script Codes
Minion Animation - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded January 28, 2023
Rating 3.5
Size 3,208 Kb
Views 4,048
Do you need developer help for Minion 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!

Andy Tran (andytran) Script Codes
Name
Flat Horizontal Navigation
Day 23 - Interactive Wallet
Flat Pricing Table
Planner Dashboard
Progress Bar
The Team - Grid
Interactive Location Modal
Tabs Modal
Flat Login Form 3.0
Draggable Chatbox
Create amazing sales emails 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!