136 lines
2.7 KiB
SCSS
136 lines
2.7 KiB
SCSS
|
|
|
|
@-webkit-keyframes movietitletranslator {
|
|
0% {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
/*z-index: 0;*/
|
|
opacity:0;
|
|
}
|
|
5% {
|
|
/*transform: translate3d(0px, 0px, 0px);*/
|
|
/*z-index: 0;*/
|
|
opacity:1;
|
|
transform: rotateX(0deg);
|
|
}
|
|
97% {
|
|
opacity:1;
|
|
}
|
|
100% {
|
|
transform: translate3d(0px, 20px, 300px) rotateX(5deg);
|
|
/*z-index: 20;*/
|
|
opacity:0;
|
|
}
|
|
}
|
|
|
|
.movietitlewrapper {
|
|
position:absolute;
|
|
/*transform: rotateY(-20deg);*/
|
|
transform-origin: top left;
|
|
opacity:0;
|
|
left:25%;
|
|
-webkit-animation-name: movietitletranslator;
|
|
-webkit-animation-duration: 10s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
/*-webkit-animation-timing-function: ease-in-out;*/
|
|
-webkit-animation-timing-function: linear;
|
|
width:400px;
|
|
height:300px;
|
|
position:absolute;
|
|
}
|
|
|
|
.movietitleimg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
/* bottom: 0px; */
|
|
position: absolute;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
box-shadow: 0px 3px 3px #333333;
|
|
}
|
|
|
|
#movietitleswapper {
|
|
width: 100%;
|
|
height: 400px;
|
|
margin-top:30px;
|
|
}
|
|
|
|
// #movietitle1 {-webkit-animation-delay: 0s;}
|
|
// #movietitle2 {-webkit-animation-delay: -2s;}
|
|
// #movietitle3 {-webkit-animation-delay: -4s;}
|
|
// #movietitle4 {-webkit-animation-delay: -6s;}
|
|
// #movietitle5 {-webkit-animation-delay: -8s;}
|
|
|
|
@for $i from 1 through 5 {
|
|
#movietitle#{$i} {
|
|
-webkit-animation-delay: ((1-$i)*2)+s;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.imdbpageimg {
|
|
position:absolute;
|
|
}
|
|
|
|
#problem3intro3 {
|
|
text-align: center;
|
|
opacity:1;
|
|
}
|
|
|
|
/*do the fucked up transition for the imdbpageimgs*/
|
|
@-webkit-keyframes imdbpagetranslator {
|
|
0% {
|
|
transform: translate3d(0px, 0px, -400px) rotateY(-22deg);
|
|
z-index: 0;
|
|
opacity:0;
|
|
}
|
|
5% {
|
|
opacity:1;
|
|
}
|
|
97% {
|
|
opacity:1;
|
|
}
|
|
100% {
|
|
transform: translate3d(-80px, 80px, -300px) rotateY(-18deg);
|
|
z-index: 10;
|
|
opacity:0;
|
|
}
|
|
}
|
|
|
|
#imdbpageswapper {
|
|
height:400px;
|
|
}
|
|
|
|
.imdbpageimg {
|
|
width:100%;
|
|
transform: rotateY(-20deg);
|
|
transform-origin: top left;
|
|
opacity:0;
|
|
-webkit-animation-name: imdbpagetranslator;
|
|
-webkit-animation-duration: 15s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
// #imdbpage1 {-webkit-animation-delay: 0s;}
|
|
// #imdbpage2 {-webkit-animation-delay: -3s;}
|
|
// #imdbpage3 {-webkit-animation-delay: -6s;}
|
|
// #imdbpage4 {-webkit-animation-delay: -9s;}
|
|
// #imdbpage5 {-webkit-animation-delay: -12s;}
|
|
|
|
@for $i from 1 through 5 {
|
|
#imdbpage#{$i} {
|
|
-webkit-animation-delay: ((1-$i)*3)+s;
|
|
}
|
|
}
|
|
|
|
#problem3intro4 {
|
|
opacity:1;
|
|
}
|
|
|