New bouncing animation

assets/css/animations.css

@@ -9,50 +9,62 @@
 	-webkit-animation-name: fadeIn;
 	-webkit-animation-duration: .3s;
 	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	-moz-animation-name: fadeIn;
 	-moz-animation-duration: .3s;
 	-moz-animation-fill-mode: forwards;
+	-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	animation-name: fadeIn;
 	animation-duration: .3s;
-	animation-fill-mode: forwards; }
+	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
 
 .fadeOut {
 	-webkit-animation-name: fadeOut;
 	-webkit-animation-duration: .3s;
 	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	-moz-animation-name: fadeOut;
 	-moz-animation-duration: .3s;
 	-moz-animation-fill-mode: forwards;
+	-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	animation-name: fadeOut;
 	animation-duration: .3s;
-	animation-fill-mode: forwards; }
+	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
 
 .contentZoomIn {
 	-webkit-animation-name: zoomIn;
 	-webkit-animation-duration: .2s;
 	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	-moz-animation-name: zoomIn;
 	-moz-animation-duration: .2s;
 	-moz-animation-fill-mode: forwards;
+	-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	animation-name: zoomIn;
 	animation-duration: .2s;
-	animation-fill-mode: forwards; }
+	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
 
 .contentZoomOut {
 	-webkit-animation-name: zoomOut;
 	-webkit-animation-duration: .2s;
 	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	-moz-animation-name: zoomOut;
 	-moz-animation-duration: .2s;
 	-moz-animation-fill-mode: forwards;
+	-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	animation-name: zoomOut;
 	animation-duration: .2s;
-	animation-fill-mode: forwards; }
+	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
 
 /* moveUp ------------------------------------------------*/
 @-webkit-keyframes moveUp {
 	0% {
-		-webkit-transform: translateY(30px);
+		-webkit-transform: translateY(100px);
 		opacity: 0;
 	}
 	100% {
@@ -70,7 +82,7 @@
 }
 @keyframes moveUp {
 	0% {
-		transform: translateY(30px);
+		transform: translateY(100px);
 		opacity: 0;
 	}
 	100% {

assets/css/imageview.css

@@ -37,10 +37,13 @@
 
 		-webkit-animation-name: zoomIn;
 		-webkit-animation-duration: .3s;
+		-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 		-moz-animation-name: zoomIn;
 		-moz-animation-duration: .3s;
+		-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 		animation-name: zoomIn;
 		animation-duration: .3s;
+		animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	}
 	#imageview #image.small {
 		top: 50%;

assets/css/infobox.css

@@ -17,30 +17,31 @@
 	z-index: 4;
 	position: fixed;
 	right: 0px;
-	width: 300px;
+	width: 350px;
 	height: 100%;
 	background-color: rgba(20,20,20,0.98);
 	box-shadow: -1px 0px 2px rgba(0,0,0,.8);
 	display: none;
 
-	-webkit-transform: translateX(320px);
-	-moz-transform: translateX(320px);
-	transform: translateX(320px);
+	-webkit-transform: translateX(370px);
+	-moz-transform: translateX(370px);
+	transform: translateX(370px);
 
-	-webkit-transition: -webkit-transform .5s cubic-bezier(.225,.5,.165,1);
-	-moz-transition: -moz-transform .5s cubic-bezier(.225,.5,.165,1);
-	transition: transform .5s cubic-bezier(.225,.5,.165,1);
+	-webkit-transition: -webkit-transform .3s cubic-bezier(0.51,.92,.24,1.15);
+	-moz-transition: -moz-transform .3s cubic-bezier(0.51,.92,.24,1.15);
+	transition: transform .3s cubic-bezier(0.51,.92,.24,1.15);
 }
 #infobox.active {
-	-webkit-transform: translateX(0px);
-	-moz-transform: translateX(0px);
-	transform: translateX(0px);
+	-webkit-transform: translateX(50px);
+	-moz-transform: translateX(50px);
+	transform: translateX(50px);
 }
 
 	/* Misc ------------------------------------------------*/
 	#infobox .wrapper {
 		float: left;
 		height: 100%;
+		width: 300px;
 		overflow: scroll;
 	}
 	#infobox .edit {
@@ -70,7 +71,7 @@
 	}
 	#infobox .header h1 {
 		position: absolute;
-		margin: 15px 30%;
+		margin: 15px 30% 15px calc(30% - 25px);
 		width: 40%;
 		color: #fff;
 		font-size: 16px;
@@ -80,7 +81,7 @@
 	}
 	#infobox .header a {
 		float: right;
-		padding: 15px 15px;
+		padding: 15px 65px 15px 15px;
 		color: #fff;
 		font-size: 20px;
 		font-weight: bold;
@@ -117,7 +118,7 @@
 		color: #fff;
 		font-size: 14px;
 		line-height: 19px;
-		
+
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		user-select: text;
@@ -140,15 +141,15 @@
 		font-size: 14px;
 		margin-bottom: 8px;
 	}
-	
+
 		#infobox #tags .edit {
 			display: inline-block;
 		}
-	
+
 		#infobox #tags .empty .edit {
 			display: inline;
 		}
-	
+
 	#infobox .tag {
 		float: left;
 		padding: 4px 7px;

assets/css/message.css

@@ -30,13 +30,13 @@
 	/* Animation */
 	-webkit-animation-name: moveUp;
 	-webkit-animation-duration: .3s;
-	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	-moz-animation-name: moveUp;
 	-moz-animation-duration: .3s;
-	-moz-animation-timing-function: ease-out;
+	-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	animation-name: moveUp;
 	animation-duration: .3s;
-	animation-timing-function: ease-out;
+	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 }
 
 	/* Header ------------------------------------------------*/

assets/css/upload.css

@@ -33,13 +33,13 @@
 	/* Animation */
 	-webkit-animation-name: moveUp;
 	-webkit-animation-duration: .3s;
-	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	-moz-animation-name: moveUp;
 	-moz-animation-duration: .3s;
-	-moz-animation-timing-function: ease-out;
+	-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 	animation-name: moveUp;
 	animation-duration: .3s;
-	animation-timing-function: ease-out;
+	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
 }
 
 	/* Icon ------------------------------------------------*/