Interface Animation
How do I make an interface animation?
What is a interface animation? How do you make a interface animation? This script and codes were developed by Robert on 04 September 2022, Sunday.
Interface Animation Previews
Interface Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Interface Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="mainbar"> </div> <div class="sidebar"> <div class="logo"></div> <div class="lines"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="images"> <ul> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> <li><img src="" alt="" /></li> </ul> </div>
</div> <script src="js/index.js"></script>
</body>
</html>Interface Animation - Script Codes CSS Codes
body { background: #85E2F3;
}
.container { position: relative; width: 0px; height: 0px; margin: 50px auto; background: white; overflow: hidden; -webkit-animation: openContainer 1.2s ease-out forwards; animation: openContainer 1.2s ease-out forwards;
}
.mainbar { background: #D2D2D2; width: 0; height: 30px; -webkit-animation: openMainbar .65s 1.2s ease-out forwards; animation: openMainbar .65s 1.2s ease-out forwards;
}
.sidebar { position: relative; background: #BFBFBF; width: 0; height: 310px; -webkit-animation: openSidebar .45s 2.4s ease-out forwards; animation: openSidebar .45s 2.4s ease-out forwards;
}
.sidebar .logo { width: 0px; height: 0px; background: #959595; border-radius: 50%; position: absolute; top: 35px; left: 35px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: openLogo .45s 3s ease-in-out forwards; animation: openLogo .45s 3s ease-in-out forwards;
}
.sidebar .lines { position: absolute; top: 105px; padding: 0px 20px;
}
.sidebar .line { width: 0px; height: 8px; left: 20px; margin-bottom: 10px; background: #959595;
}
.sidebar .line:nth-child(1) { -webkit-animation: openLine 0.35s 3.65s ease-out forwards; animation: openLine 0.35s 3.65s ease-out forwards;
}
.sidebar .line:nth-child(2) { -webkit-animation: openLine 0.35s 3.8s ease-out forwards; animation: openLine 0.35s 3.8s ease-out forwards;
}
.sidebar .line:nth-child(3) { -webkit-animation: openLine 0.35s 3.95s ease-out forwards; animation: openLine 0.35s 3.95s ease-out forwards;
}
.sidebar .line:nth-child(4) { -webkit-animation: openLine 0.35s 4.1s ease-out forwards; animation: openLine 0.35s 4.1s ease-out forwards;
}
.sidebar .line:nth-child(5) { -webkit-animation: openLine 0.35s 4.25s ease-out forwards; animation: openLine 0.35s 4.25s ease-out forwards;
}
.images { position: absolute; background: white; width: 450px; height: 300px; top: 35px; left: 140px;
}
.images ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.images ul li { display: -webkit-box; display: -ms-flexbox; display: flex; width: 0px; height: 0px; background: #CCCCCC; margin: 9px; float: left; background: url("http://static1.tme.eu/pics/icons/no-image-placeholder-big.png") no-repeat; background-size: contain; background-position: 50% 50%; position: relative; opacity: 0;
}
.images ul li:nth-child(1) { -webkit-animation: openImages 0.75s 3.65s ease-out forwards; animation: openImages 0.75s 3.65s ease-out forwards;
}
.images ul li:nth-child(2) { -webkit-animation: openImages 0.75s 3.8s ease-out forwards; animation: openImages 0.75s 3.8s ease-out forwards;
}
.images ul li:nth-child(3) { -webkit-animation: openImages 0.75s 3.95s ease-out forwards; animation: openImages 0.75s 3.95s ease-out forwards;
}
.images ul li:nth-child(4) { -webkit-animation: openImages 0.75s 4.1s ease-out forwards; animation: openImages 0.75s 4.1s ease-out forwards;
}
.images ul li:nth-child(5) { -webkit-animation: openImages 0.75s 4.25s ease-out forwards; animation: openImages 0.75s 4.25s ease-out forwards;
}
.images ul li:nth-child(6) { -webkit-animation: openImages 0.75s 4.9s ease-out forwards; animation: openImages 0.75s 4.9s ease-out forwards;
}
.images ul li:nth-child(7) { -webkit-animation: openImages 0.75s 5.05s ease-out forwards; animation: openImages 0.75s 5.05s ease-out forwards;
}
.images ul li:nth-child(8) { -webkit-animation: openImages 0.75s 5.2s ease-out forwards; animation: openImages 0.75s 5.2s ease-out forwards;
}
.images ul li:nth-child(9) { -webkit-animation: openImages 0.75s 5.35s ease-out forwards; animation: openImages 0.75s 5.35s ease-out forwards;
}
.images ul li:nth-child(10) { -webkit-animation: openImages 0.75s 5.5s ease-out forwards; animation: openImages 0.75s 5.5s ease-out forwards;
}
.images ul li:nth-child(11) { -webkit-animation: openImages 0.75s 6.65s ease-out forwards; animation: openImages 0.75s 6.65s ease-out forwards;
}
.images ul li:nth-child(12) { -webkit-animation: openImages 0.75s 6.8s ease-out forwards; animation: openImages 0.75s 6.8s ease-out forwards;
}
.images ul li:nth-child(13) { -webkit-animation: openImages 0.75s 6.95s ease-out forwards; animation: openImages 0.75s 6.95s ease-out forwards;
}
.images ul li:nth-child(14) { -webkit-animation: openImages 0.75s 7.1s ease-out forwards; animation: openImages 0.75s 7.1s ease-out forwards;
}
.images ul li:nth-child(15) { -webkit-animation: openImages 0.75s 7.25s ease-out forwards; animation: openImages 0.75s 7.25s ease-out forwards;
}
.images ul li:after { content: ''; position: absolute; width: 70px; height: 80px; background: #BFBFBF; opacity: .5;
}
@-webkit-keyframes openContainer { 50% { width: 600px; height: 1px; } 100% { width: 600px; height: 340px; }
}
@keyframes openContainer { 50% { width: 600px; height: 1px; } 100% { width: 600px; height: 340px; }
}
@-webkit-keyframes openMainbar { 100% { width: 100%; }
}
@keyframes openMainbar { 100% { width: 100%; }
}
@-webkit-keyframes openSidebar { 100% { width: 130px; }
}
@keyframes openSidebar { 100% { width: 130px; }
}
@-webkit-keyframes openLogo { 0% { width: 55px; height: 55px; } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { width: 55px; height: 55px; }
}
@keyframes openLogo { 0% { width: 55px; height: 55px; } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } 100% { width: 55px; height: 55px; }
}
@-webkit-keyframes openLine { 100% { width: 90px; }
}
@keyframes openLine { 100% { width: 90px; }
}
@-webkit-keyframes openImages { 0% { opacity: .3; width: 0px; height: 0px; -webkit-transform: rotate(-90deg) scale(0.1); transform: rotate(-90deg) scale(0.1); } 100% { opacity: 1; width: 70px; height: 80px; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
}
@keyframes openImages { 0% { opacity: .3; width: 0px; height: 0px; -webkit-transform: rotate(-90deg) scale(0.1); transform: rotate(-90deg) scale(0.1); } 100% { opacity: 1; width: 70px; height: 80px; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
}
Interface Animation - Script Codes JS Codes
//Inspired by: https://d13yacurqjgara.cloudfront.net/users/182065/screenshots/2063693/untitled-3.gif
//Use Chrome to get the best experience
| Developer | Robert |
| Username | AgentRR007 |
| Uploaded | September 04, 2022 |
| Rating | 4.5 |
| Size | 3,829 Kb |
| Views | 24,288 |
Do you need developer help for Interface 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!
Robert (AgentRR007) Script Codes
| Name | Size |
| Angular Alarm | 5,760 Kb |
| CSS Background Color Split | 1,741 Kb |
| Simple Calculator | 3,053 Kb |
| Angular Calendar Clock | 7,543 Kb |
| Custom Directive | 3,425 Kb |
| Santa, my house is over here... | 2,419 Kb |
| Angular Template | 2,104 Kb |
| Observing Cells | 2,788 Kb |
| UI Challenge - Budget Selector | 3,547 Kb |
| FireBase Demo | 3,081 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Light Switch | Bartuc | 4,933 Kb |
| Next Word Predictor | Rfalor | 2,776 Kb |
| A Pen by Jay | Jaycode | 3,784 Kb |
| Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| Toggle Time | Petebot | 5,345 Kb |
| Social Profiles | Lachlanjc | 1,939 Kb |
| Hovers with popups | Zacharyolson | 2,380 Kb |
| Super Discount | Orrinward | 3,225 Kb |
| Parallax.js | Zmeeey5 | 2,330 Kb |
Do you want hide your ip address?
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!