CSS3 Run Page Transition When Html Rendered - javascript

I have a simple CSS3 fade in page transition, which works well (ONLY care about IE10+). Here's what it looks like:
HEAD
body
{
opacity: 0;
transition: all 1s ease;
}
.loaded
{
opacity:1;
}
BODY
<body onload="document.body.classList.add('loaded');">
The only problem now, is that if the page has a lot of images, the onload event is triggered only when all of them are downloaded.
What can I do, using pure javascript or CSS to do the fade in, even while images are downloading?
NOTE: Can't use any external js files or frameworks.

As you only care about IE10+ (and other major browsers I assume), you can use the HTML5 event DOMContentLoaded.
document.addEventListener('DOMContentLoaded', function () {
document.body.classList.add('loaded');
}, false);
This is supported in Chrome 0.2+, FF 1.7+, IE 9+, Opera 9+ and Safari 3.1+.

You could use pure CSS
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element-to-fade-in
{
opacity:1;
animation: fadein 1s;
}
Don't forget to add the prefixes

Related

CSS animation rendering inconsistently on iOS

I'm trying to make a div repeatedly appear instantly and slowly fade-out, at arbitrary intervals.
JS used to make the div appear:
div.classList.remove('fade-out');
div.offsetWidth;
div.classList.add('fade-out');
With this CSS:
.fade-out {
animation: fadeOut 2.5s ease-out;
}
#keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
div { opacity: 0; }
For some reason, this works as expected in desktop Chrome, Safari & Firefox, but on iOS around half of the time the animation isn't played — the div just disappears after 2.5 seconds with no progressive opacity change. This happens both on both iPhone and iPad, with both Firefox and Safari.
Stuff tried since the initial post:
Add animation: none to the element's original definition.
Set the animation property through JS instead.
Use 100% and 0% instead of to and from.
Setting the div's initial opacity to 1 instead of 0 and add animation-fill-mode: forward.
Add a short delay with setTimeOut.
Use full animation definition instead of shorthand notation.
Additional definition using -webkit-animation and #-webkit-keyframes.
Using any of the above doesn't have an effect on the animation, which still works as expected everyhere except on iOS.
(Not a real) solution
The only way I could make iOS display the animation consistently was by adding a short delay to the animation:
animation: fadeOut 2.5s ease-out 0.01s
However, since the div's "instant display then fade-out" animation can be triggered while an old animation is still running on it, the delay adds a noticeable one-frame flash which is undesirable (regardless of how low I set the delay value).
Any ideas?

animation-play-state is 'running' but won't play

I'm currently building a landing page with some css animations (pretty basic fade-ins). I initially set animation-play-state: "paused" in my css file, and later on access it with jQuery while scrolling the page, to trigger the animation.
Works perfectly fine on Chrome on my Mac, but trying to run it from both Safari and Chrome on my iPhone does not seems to work.
I inspected the console logs and debugged it as far as I could think, everything seems to work but the actual animation does not run (however the animation-play-state is changing to "running".
Last thing to add, if I put the $(".row").css("animation-play-state", "running"); statement before the if statement, it does exactly what it supposed to do.
My jQuery statement is:
//the position where I want the animation to trigger
var destinations = $('#destinations').offset().top - 300;
//the event listener
if($(window).scrollTop() > destinations) {
$(".row").css("-webkit-animation-play-state", "running");
$(".row").css("animation-play-state", "running");
}
Anyone knows the problem? Thanks a lot in advance!
Niv
Faced this issue today. I've was changing animation-play-state, to create nice reveal animation.
There was also animation-fill-mode: both; defined.
I used keyframes like this
#keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
And nothing seem to help in Safari. Mine tested version is 11.1.2 (13605.3.8) (Stable at this moment) and Safari Technology Preview Release 63 (Safari 12.1, WebKit 13607.1.2.1), on Macbook as well as iPhone - result is same, no animation playing.
TL.DR. You can't simply change animation-play-state in Safari. Try to change animation-name property
I was lucky to use opacity and transform to reveal elements, so this hacky temporal animation name helped me:
#keyframes be-hidden {
from { opacity: 0; }
to { opacity: 0.0000001; }
}
#keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
div {
animation-name: be-hidden;
animation-duration: 600ms;
animation-fill-mode: both;
animation-delay: 500ms;
animation-iteration-count: 1;
}
div.revealed {
animation-name: fade;
}
Set animation-name to some temp animation, which will hide elements, then change it to other (.revealed class)
If there is another way to resolve this issue, I will be happy to see it.
Possibly related: https://stackoverflow.com/a/33272708/3278855

Jquery and CSS image centering not working in tab

I have a problem with my image centering in jquery tab. I have created this DEMO from codepen.io . If you click my DEMO page then you see 1.Tab , 2.Tab and 3.Tab and there is 1.Tab is active. 1.Tab image centering is working but if you click 2.Tab and 3.Tab then you see image centering is not working. What i need to do here anyone can help me ?
I am using this css code for img:
.img {
float:left;
width:310px;
height:180px;
overflow:hidden;
}
.img img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
.img:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Not: I think this is not css problem.
The problem is that the tabify plugin hides the list elements (which includes the images) of all inactive tabs. So when you're measuring the images for calculating the right position, the image dimensions are (0,0).
A workaround for this is to wait till all images have been loaded and after that apply the tabify plugin.
This is what I mean:
$(document).ready( function() {
var $imgs = $('.img img'),
count = $imgs.length,
counter = 0;
$imgs
.imgCentering({'forceSmart':true})
.load(function() {
counter++;
if(counter === count) {
$('#magtabs_').tabify();
}
})
})
You better should use the event handlers you've already defined in your imgCentering function. This code snippet works, but it is only a example of how it could be fixed.
Here is the working example
I see that you have a script for centering but the thing is, it's only getting the right value for the active one and 0 for the others. This messes up the computation of the left and top values. So it's more of a loading issue...

onTransitionEnd not working Android 4.3 Samsung S3

I have a small nifty game I'm trying to develop at this link which has css transition class definitions
`el {
transition: transform .3s;
-webkit-transition: -webkit-transform .3s;
position:absolute;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
top:0;
}
.close {
transition-duration: .15s;
-webkit-transition-duration: .15s;
}
.open {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}`
on elements and uses a [prefix]TransitionEnd event to function.
$el.on(transitionEnd,function(){ // transitionEnd is a polyfill result from browser sniff
if($el.hasClass('close'))
setTimeout(function(){
$el.addClass('open');
},Math.random() * 2500));
else $el.addClass('close').removeClass('open');
});
The expected result is that the function would change the element's translate3d() based on the class add/removed each time the transition ends.
I am able to see this in action on desktop and mobile browsers except for the Samsung Galaxy S3 running Android 4.3. I was told that on the S3 that it runs only once and the elements remain with the ".close" class. I don't have an actual device but the little debugging I did is leading me to believe that the [prefix]TransitionEnd is not firing when changing the class definitions which affects the transitions. Can anyone with a Samsung S3 with Android 4.3 try it out and let me know if it works...and what workaround I can use to solve it?

Slideshow with content animated in CSS

I have a slideshow with 3 images. For each of the image I have need to add some content on top of the image, and the text need to move from right to left, and gone in 3 secs. Then it will slide to the 2nd image, and again, I have to display the content from right to left again, this time with a background box at the back of the text.
How can I do this kind of animation in css? Moreover, this slider need to be compatible for all browsers.
Can anyone give me a hint?
Thanks in advance.
You can totally do that kind of animation with CSS, but you would have to use javascript to trigger the animations. The method you are talking about would not work for all browsers. If you can use jQuery for your projects, then you can use the animate feature. Plus it would be compatible for essentially all browsers that people use.
For the CSS approach, you would use the animation property, like this
#keyframes {
from { color: #fff; } to { color: #000; }
}
#-webkit-keyframes {
from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
animation: myanimation 2s ease-in;
-webkit-animation: myanimation 2s ease-in;
}
For the jQuery approach, look up jQuery's animate feature. You will find all that you need.
https://api.jquery.com/animate/

Categories