CSS Transition End Sequence
How do I make an css transition end sequence?
Handling animations in CSS, but calling them in sequence with JS. Inspired by a part of this article: http://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/. What is a css transition end sequence? How do you make a css transition end sequence? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.
CSS Transition End Sequence - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Transition End Sequence</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ button { background: orange; border-radius: 0.5em; border: none; font-size: 1em; padding: 1em; margin: 1em auto; display: inline-block; color: #333; transition: background 250ms; outline: none !important;
}
button:hover { background: #ffc966; cursor: pointer;
}
ul { background: rgba(0, 0, 0, 0.4); box-sizing: border-box; margin: 1em auto; padding: 0; width: 100%; opacity: 0; transition: opacity 250ms; text-align: left; overflow: hidden; display: block;
}
ul.open { opacity: 1;
}
li { display: block; color: #fff; margin: 0; padding: 0; font-size: 1em; opacity: 0; transform: translateX(-100%); transition: transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 250ms ease-in-out;
}
li.animate-in { opacity: 1; transform: translateX(0); transition: transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a { display: block; padding: 1em; transition: color 250ms, background 250ms;
}
li a:hover { background: black; color: orange; cursor: pointer;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>TransitionEnd & Menu Items</h1>
<h2>For doing some CSS animation with the help of jQuery in sequence (like chaining animations)</h2>
<button type="button" id="menuToggle">Toggle Menu</button>
<br>
<ul id="menu"> <li class="item"><a>Home</a></li> <li class="item"><a>About</a></li> <li class="item"><a>Products</a></li> <li class="item"><a>Support</a></li> <li class="item"><a>Contact</a></li> </ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CSS Transition End Sequence - Script Codes CSS Codes
button { background: orange; border-radius: 0.5em; border: none; font-size: 1em; padding: 1em; margin: 1em auto; display: inline-block; color: #333; transition: background 250ms; outline: none !important;
}
button:hover { background: #ffc966; cursor: pointer;
}
ul { background: rgba(0, 0, 0, 0.4); box-sizing: border-box; margin: 1em auto; padding: 0; width: 100%; opacity: 0; transition: opacity 250ms; text-align: left; overflow: hidden; display: block;
}
ul.open { opacity: 1;
}
li { display: block; color: #fff; margin: 0; padding: 0; font-size: 1em; opacity: 0; transform: translateX(-100%); transition: transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 250ms ease-in-out;
}
li.animate-in { opacity: 1; transform: translateX(0); transition: transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
a { display: block; padding: 1em; transition: color 250ms, background 250ms;
}
li a:hover { background: black; color: orange; cursor: pointer;
}
/* Make things perty */
html { height: 100%;
}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; background: url(http://www.jmchristensendesign.com/wp-content/themes/jmcdsn/images/intro_default-background.jpg); color: #fff; height: 100%; padding-top: 2em; text-align: center;
}
h1,
h2 { margin: 0; text-transform: uppercase; text-shadow: 0 0 0.5em black;
}
h2 { font-weight: 300;
}
input { border: 1px solid #666; background: #333; color: #fff; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em auto; text-align: center;
}
CSS Transition End Sequence - Script Codes JS Codes
$(document).ready(function(){ $('#menuToggle').on('click', menu.toggle);
});
/** * Helper function so we don't have double call issues. * * @return {string} [Proper event name for the browser] */
whichTransitionEvent = function(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } }
}
/** * Our custom event name. * Uses the function to get the proper single one for the browser. * */
transitionEnd = whichTransitionEvent();
menu = { isAnimated: false, toggle: function(){ var $menu = $('#menu'); if (!menu.isAnimated) { if ($menu.hasClass('open')){ menu.close(); } else { menu.open(); } } else { return false; } }, /** * Open the menu. * */ open: function(){ var $firstItem = $('#menu .item:first'); menu.isAnimated = true; // We're animating now $("#menu") .addClass('open') .one(transitionEnd, items.animate($firstItem, 'forwards', function(){ menu.isAnimated = false; // We're done! })); }, /** * Close the menu * */ close: function(){ var $firstItem = $('#menu .item:last'); menu.isAnimated = true; // We're animating now items.animate($firstItem, 'backwards', function(){ $('#menu') .removeClass('open') .one(transitionEnd, function(){ menu.isAnimated = false; // We're done! }); }); }
}
items = { animate: function(element, direction, callback){ var $next; if (direction === 'forwards'){ $next = element.next(); element.addClass('animate-in'); } else if (direction === 'backwards'){ $next = element.prev(); element.removeClass('animate-in'); } else { return false;} element.one(transitionEnd, function(event){ event.stopPropagation(); if ($next.length){ items.animate($next, direction, callback); } else if (typeof callback === 'function'){ callback(); } }); }
}
Developer | Jon Christensen |
Username | JMChristensen |
Uploaded | August 03, 2022 |
Rating | 3 |
Size | 4,980 Kb |
Views | 24,288 |
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!
Name | Size |
Responsive SVG Overlay | 2,674 Kb |
Google Button Ripple | 3,524 Kb |
Vue JS Filtering | 9,746 Kb |
Panel Navigation | 4,288 Kb |
SVG Animated Stroke Dash | 3,623 Kb |
3D Cube | 2,543 Kb |
FitText.js Demo | 1,897 Kb |
SVG Circle Progress | 3,368 Kb |
Section Diagonal Areas | 2,810 Kb |
SVG Image Blur | 3,893 Kb |
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!
Name | Username | Size |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Layout 11 | Altynai | 1,690 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
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!