css animation

TopUp April 17, 2023 css

power dy made with love ♥ Example from w3

full example code

<!DOCTYPE html>
<html>
<!---
==============================================
JQuery
==============================================
--->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<head>

<style> 

/*
==============================================
Box FOR ANIMATING
==============================================
*/
div {
  width: 100px;
  height: 100px;
  background-color: #fe5652;
  position: relative;
  visibility: hidden;
}

/*
==============================================
ANIMATING FROM http://www.justinaguilar.com/animations/css/animations.css
==============================================
*/
@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
ANIMATING TYPE. Eg: slideRight, slideExpandUp, expandUp,
==============================================
*/

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}
</style>
</head>
<body>

<!---
==============================================
ANIMATING TYPE. Eg: slideRight, slideExpandUp, expandUp,
==============================================
--->

<h1>The @keyframes Rule for Yoostrap</h1>

<div class="slideDown"></div>




<!---
==============================================
ANIMATING TYPE. Eg: slideRight, slideExpandUp, expandUp,
==============================================
--->
<script>
	$(window).scroll(function() {
		$('#animatedElement').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideUp");
			}
		});
	});
</script>
<script>
	$('#animatedElement').click(function() {
		$(this).addClass("slideUp");
	});
</script>
</body>
</html>

>Output is:

No comments

Subscribe to: Post Comments ( Atom )