Door Animation

Developer
Mario Duarte
Size
3,292 Kb
Views
109,296
  1. Door Animation Previews
  2. Door Animation HTML Codes
  3. Door Animation CSS Codes
  4. Door Animation JS Codes

How do I make an door animation?

Almost pure css! A simple CSS3 animation of a opening door. What is a door animation? How do you make a door animation? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

Door Animation Previews
IQ Test

Door Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Door Animation</title> <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> <div class="container"> <div class="entrance"></div> <div class="surprize"></div> <div class="door"> <div class="handle"></div> </div> <div class="floor"></div> <div class="instructions"> <p>Go ahead! Knock on the door to open it.</p> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Door Animation - Script Codes CSS Codes

html, body { margin: 0; padding: 0; height: 100%;
}
@-webkit-keyframes openDoor { 0% { -webkit-transform: rotateY(30deg) skewY(-5deg); transform: rotateY(30deg) skewY(-5deg); } 50% { -webkit-transform: rotateY(60deg) skewY(-20deg); transform: rotateY(60deg) skewY(-20deg); } 90% { -webkit-transform: rotateY(60deg) skewY(-20deg); transform: rotateY(60deg) skewY(-20deg); } 100% { -webkit-transform: rotateY(30deg) skewY(-5deg); transform: rotateY(30deg) skewY(-5deg); }
}
@keyframes openDoor { 0% { -webkit-transform: rotateY(30deg) skewY(-5deg); transform: rotateY(30deg) skewY(-5deg); } 50% { -webkit-transform: rotateY(60deg) skewY(-20deg); transform: rotateY(60deg) skewY(-20deg); } 90% { -webkit-transform: rotateY(60deg) skewY(-20deg); transform: rotateY(60deg) skewY(-20deg); } 100% { -webkit-transform: rotateY(30deg) skewY(-5deg); transform: rotateY(30deg) skewY(-5deg); }
}
.container { width: 100%; height: 100%; min-height: 400px; background-color: #27ae60; position: relative;
}
.container .floor { width: 100%; height: 200px; background-color: #16a085; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
}
.container .entrance { width: 50px; height: 80px; background-color: #1e8449; position: absolute; bottom: 200px; left: calc(50% - 25px); z-index: 1;
}
.container .surprize { position: absolute; bottom: 240px; left: calc(50% - 15px ); width: 20px; height: 30px; z-index: 1;
}
.container .surprize:before,
.container .surprize:after { position: absolute; content: ""; left: 5px; top: 0; width: 5px; height: 10px; background: red; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; z-index: 9;
}
.container .surprize:after { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
}
.container .door { width: 50px; height: 80px; background-color: #e67e22; position: absolute; bottom: 200px; left: calc(50% - 25px); -webkit-transform-origin: center right; transform-origin: center right; -webkit-transform: rotateY(30deg) skewY(-5deg); transform: rotateY(30deg) skewY(-5deg); z-index: 2; cursor: pointer;
}
.container .door.open { -webkit-animation: openDoor 2.5s 0.5s 1; animation: openDoor 2.5s 0.5s 1;
}
.container .door .handle { width: 4px; height: 4px; background-color: #ecf0f1; position: absolute; top: 35px; left: 2px; z-index: 3;
}
.container .instructions { position: fixed; top: 20px; left: calc(50% - 110px); text-align: center;
}
.container .instructions p { width: 200px; padding: 10px 20px; background-color: #eee; color: #555; font-family: helvetica; border-radius: 50px;
}

Door Animation - Script Codes JS Codes

//Almost pure css - js used only to detect the clicks!!!
$('body').on('click', '.door', function(e) { e.preventDefault(); var timed = false; if (timed === false) { timed = true; $(this).addClass('open'); setTimeout(function closeDoor() { $('.door').removeClass('open'); timed = false; }, 3000); } else { null; }
});
Door Animation - Script Codes
Door Animation - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 3,292 Kb
Views 109,296
Do you need developer help for Door 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!

Mario Duarte (MarioDesigns) Script Codes
Name
The Dark - CSS animated background
Hamburger Menu Animation
Popular Pens with ReactJS
Floating Animation - CSS
JavaScript Lesson - Todo list
Console Simulator
Element Card - Group 11 element
Floating Loading Animation
Minimalist Mobile Mockup
3D Pyramid Animation
Create amazing love letters 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!