CSS reveal from corner animation

Question

I am trying to achieve an animation effect as follows:

When a banner is shown, the bottom right corner of the next banner should be visible. When you click on this c

Answer 1

This should work for any browser with transition support: https://jsfiddle.net/freer4/cqqxjjgu/1/

Essentially, make a really big cover slide, with the same background color as your next slide, and pull it over your current slide. Then fade out to reveal the next slide.

So a little adjustment on the html:

  

    

      Slide 1
    
    

    
      
  

  

    

      Slide 2
    
    

    

  

  

    

      Slide 3
    
    

    

  

Change the jQuery to select either the next slide or the first if there are no more:

$(document).ready(function () {
    $('.corner').click(function() {
        var $parent = $(this).parent();
        $parent.removeClass("active");
        if ($parent.next().length){
            $parent.next().addClass("active");
        } else {
            $parent.prevAll().last().addClass("active");
        }
    });
});

And set up some intricate transitions you can adjust the timing of:

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow:hidden;
    z-index:1;
    transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
    text-align:center;
    opacity:0;
}
.image.active{
    opacity:1;
    z-index:2;
    transition:z-index 2s step-end, 0s opacity 0s;
}

.corner {
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: -100%;
    clip-path: polygon(100% 0, 0 70%,  0 100%, 100% 100%, 100% 0, 100% 0);
    z-index:3;
    margin-left:150%;
    margin-top:150%;
    transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
.image.active .corner{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}

---

Aside: This example is completely flexible (doesn't care about size):

.banners {
    width: 100%;
    height: 100%;
}

Or with images: https://jsfiddle.net/freer4/ens7caaL/