Css animation on page load
Is it possible to use css animation on page load? I am learning using css animations right now as I have never worked with them.
So far, I've created this: https://jsfiddle.net/7prg793g , however it only works in hover mode.
* {
margin: 0;
padding: 0;
}
.reveal {
width: 380px;
height: 660px;
margin: 50px;
float: left;
}
.open {
background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.open:hover {
background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
If this is possible, then my next question is, is it possible to drag the animation until the div is visible? I am going to use a preloader before getting started.
Thank.
source to share
Pure CSS solution (keyframes)
This solution is ok, but it depends on the compatibility you want across browsers:
@keyframes opening {
0% {
background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
}
100% {
background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
}
}
@keyframes opening-p {
0% {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
}
I created two keyframes to use as animation with div and text. After I have bound the animation this way (using animation-fill-mode: forwards;)
.open {
background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
background:no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
animation-name: opening;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
cursor:pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
animation-name: opening-p;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
Here's a fiddle: http://jsfiddle.net/8anvmpfv/
JQuery solution
So this is easy to do with jquery:
$('.reveal').ready(function() {
$('.reveal').addClass('opened revealed');
});
It expects the div to be ready and jquery to provide the div with the correct class that does the animation with css. Here's the fiddle: https://jsfiddle.net/k6faf0fu/
source to share
JavaScript to add css animation to pageload:
$(document).ready(function() {
$("yourHtmlTag").addClass("open:hover");
});
Check out the jQuery API for visibility .
source to share
You can do it with pure css, which I believe is (by setting animation delays and doing the math to figure it out), but I think your best bet would be with some javascript.
Here's a script for a very simple (and ugly) loading animation screen.
You run the page with body
'locked' and some kind of overlay to prevent users from interacting with the site. Then you listen to the transitionend
various elements so you know when to run additional ones transitions
.
You can do the same with css animation, just use animationend
.
source to share