Merge branch 'bounce'

This commit is contained in:
Tobias Reich 2014-03-16 21:01:51 +01:00
commit 7d1da4d944
6 changed files with 45 additions and 29 deletions

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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