Fade-in fade-out css only

Question

I'm trying to create a fade in fade out effect to apply on page load and when leaving the page... But I need it to use only css.
My boss wants this effect, but i don't want to use javascript (I'm afraid it won't always work, and it is not working properly...) The javascript for this effect is this, does anybody know how to do this using only css?

<script type="text/javascript">

$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);

$(".link").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(1000, redirectPage);      
});

function redirectPage() {
    window.location = linkLocation;
}
});
</script>

If I understand that jQuery right, it seems like you are fading out and then redirecting on click of a link. That effect that I don't think would be possible with CSS alone. You would still need JS to find out when the transition ends and then redirect. — Harry, Aug 06 '15 at 16:18
the page is fading in on load, and fading out when I click a link with the class="link"... — André Mata, Aug 06 '15 at 16:21
@AndréMata What **Harry** is trying to tell you is that if you do this in CSS, load fade effect would work, but when clicking the button it will instantly redirect you, no matter which CSS effect you set up, so you would not be able to see the fade out effect when leaving the page and for that **Harry** insisted in using JQuery to perform this task. — Anwar, Aug 06 '15 at 16:25
@AndréMata Yes Zeratops has got it right, it is basically redirecting **after** the fade out happens. When you do it with pure CSS, you can achieve either a fade out (or) an instant redirect. The redirect after fade out is not possible as far as I am aware. — Harry, Aug 06 '15 at 16:29
I understand... Can you tell me how to do those effects please? I'll try and explain that to my boss and show her the options... Thank you very much for your help! — André Mata, Aug 06 '15 at 16:33
Here is a link to another post that I think has your answer. http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load — Bytesized, Aug 06 '15 at 16:37
@AndréMata: The link provided by Bytesized should help you to a good extent. Method 2 should suit you more since you want the effect to happen on click of a link. That transition is a fadein and you would have to reverse it. Once the transition is complete (check this with [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend) event), you would need to redirect. — Harry, Aug 06 '15 at 16:43

score 0 · Answer 1 · answered Aug 06 '15 at 16:52

I think the only possibility is apply css transition via a body class.

<style>
body.hide{
 opacity: 0;
}
body.hidefast { 
  transition:All 1s ease;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  opacity: 0; 
}
body { 
  transition:All 2s ease;
  -webkit-transition:All 2s ease;
  -moz-transition:All 2s ease;
  -o-transition:All 2s ease;
  opacity: 1;
}
</style>
<body class="hide">
   content content
   <a class="link" href="http://http://stackoverflow.com/">LINK</a>
   <script type="text/javascript">
 var linklocation;
 $(document).ready(function() {
  //$("body").css("display", "none");
  //$("body").fadeIn(2000);
  $("body").removeClass("hide");

 $(".link").click(function(event){
    event.preventDefault();
   linkLocation = this.href;
   //$("body").fadeOut(1000, redirectPage);      
    $("body").addClass("hidefast");
    setTimeout(redirectPage, 1000);
});

function redirectPage() {

   window.location = linkLocation;
 }
});
</script>
</body>

Fade-in fade-out css only

1 Answers1