Transitions

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

Full explanation you can see here, as much as I understand, for Chrome, Safari, Opera and FireFox syntax is:

-webkit-transition

for Internet Explorer syntax is:

transition

I will show example just for Chrome.

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>

    <div id="parentDiv">
        I belong to the parent
    </div>

</body>
</html>

CSS:

#parentDiv {
    border-style: solid;
    border-width: 5px;
    height: 100px;
    width: 100px;
    -webkit-transition: height 15s;
}

#parentDiv:hover {
    height: 8000px;
}

Notice line:

-webkit-transition: height 15s;

here we said that we want to see transition for height, and line:

#parentDiv:hover

Here we are changing height when we come with mouse over.

Example:

I belong to the parent

---

Event which we can use is "webkitTransitionEnd".
For example, HTML: 
<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="index.css">
		
		<script type="text/javascript" src="jquery-2.1.3.js"></script>
		<script type="text/javascript" src="index.js"></script>
	</head>
	
	<body>
	
		<div id="main">

			<div id="maxHeightDiv">
				Main div with max height
				<div id="nestedDiv">
					Div which is going to move
				</div>		
			</div>

		</div>
		
	</body>

</html>
CSS: 
div {
	overflow-y: auto;
}
#maxHeightDiv {
	
	min-height: 100px;
	max-height: 100px;	
	width: 100px;
	overflow-y: auto;
	padding: 60px 0 0 0;
}

#nestedDiv {
overflow-y: auto;
	border: 2px solid #a1a1a1;
	height: 40px;

	-webkit-transition: height 2s;
}

#nestedDiv:hover{
	height: 100px;

	-webkit-transition: height 2s;
}

#maxHeightDiv::-webkit-scrollbar {
	display: none;
}
JS: 
function myScroll() {
	$('#maxHeightDiv').scrollTop(10000);
}

window.onload = function () {
	$("#nestedDiv").on("webkitTransitionEnd", function () {
		myScroll();
	});
}
Hover with mouse over "Div which is going to move", and wait a little bit. Real life example:
Main div with max height
Div which is going to move

As you can see scroll will happen only when transition is over.

Animation

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

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.

Subcategories

CSS3

Page 8 of 8