CSS Transition End Sequence

Developer
Jon Christensen
Size
4,980 Kb
Views
24,288
  1. CSS Transition End Sequence Previews
  2. CSS Transition End Sequence HTML Codes
  3. CSS Transition End Sequence CSS Codes
  4. CSS Transition End Sequence JS Codes

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 Previews
IQ Test

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();	}	});	}
}
CSS Transition End Sequence - Script Codes
CSS Transition End Sequence - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3
Size 4,980 Kb
Views 24,288
Do you need developer help for CSS Transition End Sequence?

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!

Jon Christensen (JMChristensen) Script Codes
Name
SVG Circle Progress
SVG Animated Stroke Dash
3D Cube
Section Diagonal Areas
Vue JS Filtering
Panel Navigation
Basic Snap.svg JS Animation
FitText.js Demo
Animated gradient text
SVG Text Masking
Create amazing art & images 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!