etrepum/animation.css

## animation.css
/*

More information about transforms and transitions:

CSS transforms:
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform

CSS transitions:
* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

*/

.clickable {
    cursor: pointer;
    transition: 2s;
}

.box-1.clickable {
    width: 200px;
    height: 200px;
    background-color: blue;
}
.box-1.clicked {
    background-color: aquamarine;
    transform: rotate(360deg);
}

.box-2.clickable {
    width: 200px;
    height: 200px;
    background-color: #cccccc;
}

.box-2.clicked {
    transform: rotate3d(-1, -1, 0, 720deg);
    background-color: #333333;
    transition: 4s;
}

h1.clickable {
    transition: color 2s, margin-left 1s;
    color: blue;
}
h1.clicked {
    color: red;
    margin-left: 100px;
}

.logo.clickable {
    position: absolute;
    width: 300px;
    height: 300px;
    margin-left: -300px;
    margin-top: -300px;
    left: 100%;
    top: 300px;
}

.logo.clicked {
    top: 100%;
}

## animation.html
<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <link rel="stylesheet" href="animation.css">
</head>
<body>
    <h1 class="clickable">Click this!</h1>
    <div class="box-1 clickable"></div>
    <div class="box-2 clickable"></div>
    <img class="logo clickable" src="mbit-logo.svg">
    <script src="animation.js"></script>
</body>
</html>

## animation.js
/*jslint sloppy:true*/
/*global $ */
$('.clickable').on('click', function () {
    $(this).toggleClass('clicked');
});

## mbit-logo.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              mbit-logo.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	/*

	More information about transforms and transitions:

	CSS transforms:
	* https://developer.mozilla.org/en-US/docs/Web/CSS/transform

	CSS transitions:
	* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

	*/

	.clickable {
	cursor: pointer;
	transition: 2s;
	}

	.box-1.clickable {
	width: 200px;
	height: 200px;
	background-color: blue;
	}
	.box-1.clicked {
	background-color: aquamarine;
	transform: rotate(360deg);
	}

	.box-2.clickable {
	width: 200px;
	height: 200px;
	background-color: #cccccc;
	}

	.box-2.clicked {
	transform: rotate3d(-1, -1, 0, 720deg);
	background-color: #333333;
	transition: 4s;
	}

	h1.clickable {
	transition: color 2s, margin-left 1s;
	color: blue;
	}
	h1.clicked {
	color: red;
	margin-left: 100px;
	}

	.logo.clickable {
	position: absolute;
	width: 300px;
	height: 300px;
	margin-left: -300px;
	margin-top: -300px;
	left: 100%;
	top: 300px;
	}

	.logo.clicked {
	top: 100%;
	}
	<!doctype html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	<link rel="stylesheet" href="animation.css">
	</head>
	<body>
	<h1 class="clickable">Click this!</h1>
	<div class="box-1 clickable"></div>
	<div class="box-2 clickable"></div>
	<img class="logo clickable" src="mbit-logo.svg">
	<script src="animation.js"></script>
	</body>
	</html>
	/jslint sloppy:true/
	/global $ /
	$('.clickable').on('click', function () {
	$(this).toggleClass('clicked');
	});