Advanced Search

Return to Snippet

Revision: 66602
at June 2, 2014 21:25 by buda9
Updated Code 
/* <body class="animated fadeInDown"> ... </body> */

.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}

.animated{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}

@-webkit-keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}

@keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}

Revision: 66601
at June 2, 2014 21:24 by buda9
Updated Code 
/* <body class="animated fadeInDown"> ... </body> */

.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}

.animated{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}

@-webkit-keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}

@keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}

Revision: 66600
at June 2, 2014 21:23 by buda9
Updated Code 
.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}

.animated{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}

@-webkit-keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}

@keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}

/* <body class="animated fadeInDown">...</body> */

Revision: 66599
at June 2, 2014 21:22 by buda9
Initial Code 
.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}

.animated{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}

@-webkit-keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}

@keyframes fadeInDown {
0%{
opacity:0;
-webkit-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
Initial URL 









Initial Description





Just add 2 classed (animated fadeInDown) to body









Initial Title





animate website on load (opacity, fade)









Initial Tags





animation









Initial Language





CSS