Hamburger and Search CSS Animations

Developer
Size
4,173 Kb
Views
18,216

How do I make an hamburger and search css animations?

A quick animation of a hamburger and search icon. What is a hamburger and search css animations? How do you make a hamburger and search css animations? This script and codes were developed by James Nowland on 31 October 2022, Monday.

Hamburger and Search CSS Animations Previews

Hamburger and Search CSS Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hamburger and Search CSS Animations</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> <header> <a href="#nav" data-toggle-class="is-active" class="HamburgerIcon u-pullLeft"> <span></span> <span></span> <span></span> <span></span> </a>
<a href="#" class="Logo">prototype</a> <a href="#search" data-toggle-class="is-active" class="SearchIcon u-pullRight" > <span class="SearchIcon-circle"></span> <span class="SearchIcon-handle"></span> </a>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hamburger and Search CSS Animations - Script Codes CSS Codes

.HamburgerIcon { cursor: pointer; display: block; width: 18px; height: 15px; position: relative; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); margin: 4px auto;
}
.HamburgerIcon span { border-radius: 3px; display: block; position: absolute; height: 3px; width: 100%; background: black; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.12s ease-in-out; transition: 0.12s ease-in-out;
}
.HamburgerIcon span:nth-child(1) { top: 0px;
}
.HamburgerIcon span:nth-child(2) { top: 6px; -webkit-transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.1s; transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.1s;
}
.HamburgerIcon span:nth-child(3) { top: 6px;
}
.HamburgerIcon span:nth-child(4) { top: 12px;
}
.HamburgerIcon.is-active span { background-color: black; -webkit-transition: 0.12s ease-in-out; transition: 0.12s ease-in-out;
}
.HamburgerIcon.is-active span:nth-child(1) { top: 6px; width: 0%; left: 50%;
}
.HamburgerIcon.is-active span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.25s; transition: 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.25s;
}
.HamburgerIcon.is-active span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.3s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.15s; transition: 0.3s cubic-bezier(0.25, 1.7, 0.35, 0.8) 0.15s;
}
.HamburgerIcon.is-active span:nth-child(4) { top: 6px; width: 0%; left: 50%;
}
.SearchIcon { border-radius: 3px; display: block; cursor: pointer; height: 13px; width: 13px; padding: 5px; margin-right: 11.5px; top: -1px; position: relative;
}
.SearchIcon.is-active .SearchIcon-circle { -webkit-transform: scale(0.02); transform: scale(0.02); -webkit-transform-origin: 30% 40%; transform-origin: 30% 40%; background: white; border-color: white;
}
.SearchIcon.is-active .SearchIcon-handle:after { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.SearchIcon-circle { position: relative; display: block; height: 13px; width: 13px; background-color: white; border-radius: 100%; z-index: 0; border: 3px solid black; -webkit-transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: 1;
}
.SearchIcon-handle { position: absolute; background-color: black; top: 100%; width: 18px; height: 3px; display: block; -webkit-transform: rotate(45deg); transform: rotate(45deg); float: right; border-radius: 3px; left: 5px; top: 11.5px;
}
.SearchIcon-handle:after { content: ""; background-color: inherit; width: inherit; height: inherit; display: inherit; float: right; border-radius: inherit; -webkit-transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1;
}
* { box-sizing: border-box;
}
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
}
body { padding: 0 5px;
}
header { text-align: center; max-width: 600px; padding: 10px; margin: calc(50vh - 46px) auto 0; border: 3px solid black;
}
header:before, header:after { content: " "; display: table;
}
header:after { clear: both;
}
.Logo { color: black; text-decoration: none; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5em; line-height: 26px; display: inline-block;
}
.u-pullLeft { float: left;
}
.u-pullRight { float: right;
}

Hamburger and Search CSS Animations - Script Codes JS Codes

 $('*[data-toggle-class]').click(function(e){ e.preventDefault(); var target = $(this).data("toggleClassTarget"), classToToggle = $(this).data("toggleClass"); if (target) { $(target).toggleClass( classToToggle ); } else { $(this).toggleClass( classToToggle ); } });
Hamburger and Search CSS Animations - Script Codes
Hamburger and Search CSS Animations - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 3
Size 4,173 Kb
Views 18,216
Do you need developer help for Hamburger and Search CSS Animations?

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!

James Nowland (jnowland) Script Codes
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!