Animation

Details
Written by: Stanko Milosev
Category: CSS3
Hits: 5241

One example of animation in CSS3 (taken from here):

div {
	content:url("myImage.png");
	-webkit-animation: myfirst 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from{
		opacity: 0;
		-webkit-transform: rotate(0deg);
	} 
	to{
		opacity: 1;
		-webkit-transform: rotate(90deg);
	}
}

Example you can download here.

---

To know if animation has ended you can use this code:

window.onload = function () {
	document.getElementById("myDiv").addEventListener("webkitAnimationEnd", AnimationListener, false);
}

function AnimationListener() {
	alert("Animation has ended")
}

Notice webkitAnimationEnd, this will most problably work just in Chrome, for other browser you should some of these events: oanimationend msAnimationEnd animationend
or simply use jQuery like:

window.onload = function () {
	$("div").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", 
		function(e) {
			alert("Animation has ended");
		})
}

---

To restart your animation you can use code like this:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/jquery-2.1.1.js"></script>
		<script type="text/javascript" src="/index.js"></script>
		<link href="/index.css" rel="stylesheet" type="text/css"></link>
	</head>

	<body>
		<div class="myCssClas"></div>
		<button style="top:400px;position:absolute">Restart</button>
	</body>

</html>

JS:

window.onload = function () {
	$("button").click (function() {
		var el = $("div"),  
		newone = el.clone(true);
           
		el.before(newone);
        
		$("." + el.attr("class") + ":last").remove();
	});
}

CSS:

div {
	content:url("myImage.png");
	-webkit-animation: myfirst 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from{
		opacity: 0;
		-webkit-transform: rotate(0deg);
	} 
	to{
		opacity: 1;
		-webkit-transform: rotate(90deg);
	}
}

---

To force animation to stay on last position, use:

-webkit-animation-fill-mode: forwards;

---

One more example of animation using pure JS - no jQuery or any other framework.

HTML:

<!DOCTYPE html>
	<html>
	
		<head>
			<link type="text/javascript" rel="stylesheet" href="/index.css">
			<script type="text/javascript" src="/index.js"></script>
		</head>

		<body>
			<div id="animationOne">Animation one</div>
			<div id="animationTwo" class="withoutAnimationTwo">Animation two</div>
			<button id="animationTwoStart">Animation two - start</button>
		</body>

	</html>

CSS:

#animationOne {
	position: relative;
	left: 0px;
	top: 0px;
	color: red;
	-webkit-animation: animationOne 1s;
	-webkit-animation-fill-mode: forwards;
}

.withoutAnimationTwo {
	position: relative;
	color: green;
	left: 0px;
	top: 0px;
}

.animationTwo {
	position: relative;
	color: green;
	left: 0px;
	top: 0px;
	-webkit-animation: animationTwo 1s; 
}

@-webkit-keyframes animationOne {
	from {
		left: 0px;
	}
	to {
		left: 1000px;
	}
}

@-webkit-keyframes animationTwo {
	from {
		left: 0px;
	}
	to {
		left: 1000px;
	}
}

JS:

window.onload=function () {
	document.getElementById("animationTwoStart").addEventListener("click", function () {
		document.getElementById("animationTwo").className = 'withoutAnimationTwo'; 
		
		//this set time out I need to restart the animation
		setTimeout(function() {
			document.getElementById("animationTwo").className = "animationTwo";
		}, 10);
	});
}

Example download from here.