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 corner, it should hide the current banner and reveal the next one.

My current markup is as follows:

<div class="banners">     <div class="image active" style="background-color: red;">         <div class="corner"></div>     </div>      <div class="image" style="background-color: blue;">         <div class="corner"></div>     </div> </div> 

CSS as follows: Notice I used clip-path to create the corner:

.banners {     width: 800px;     height: 600px; }  .image {      width: 100%;      height: 100%;      position: absolute;      left: 0;      top: 0; }  .image.active {      z-index: 1;      clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0); }  .corner {     width: 50%;     height: 50%;     position: absolute;     right: 0;     bottom: 0; } 

JS:

$(document).ready(function () {     $('.corner').click(function() {         $('.image.active').removeClass('active');         $(this).parent().addClass('active');     }); }); 

Here is a JSFiddle of all the above code: https://jsfiddle.net/cqqxjjgu/

One immediate issue with this is that because I'm using z-index to specify that the current 'active' banner should have precedence, when remove the active class it just displays the next banner immediately, so ideally the z-index should only be changed once the animation has completed.

Does anyone have anyt idea how I can achieive this? Ideally I need a cross browser solution (not too fussed about IE < 10).

Answer 1

A simple example accomplishing this effect with no javascript:
https://jsfiddle.net/freer4/j2159b1e/2/

html, body{    height:100%;    width:100%;    margin:0;    padding:0;  }  .banners {    position:relative;    background:#000;    width: 100%;    height: 100%;    overflow:hidden;  }  .banners input{    display:none;  }  .slide1{    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);  }  .slide2{    background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);  }  .slide3{    background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);  }  .image {    display:block;    height:100%;    width:100%;    position: absolute;    overflow:hidden;    z-index:1;    text-align:center;    background-position:0 0;    background-size:cover;    transition:z-index 1s step-end;    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);    animation-duration: 2s;    animation-name: clipout;  }  input:checked + .image{    z-index:3;    transition:z-index 1s step-end;    clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);    animation-duration: 2.2s;    animation-name: clipin;    cursor:default;  }  .image:nth-child(2),  input:checked + * + * + .image{    z-index:2;    cursor:pointer;  }      .content{    color:#FFF;    display:inline-block;    vertical-align:middle;    font-family:arial;    text-transform:uppercase;    font-size:24px;    opacity:0;    transition:0s opacity 1s;  }  input:checked + .image .content{    opacity:1;    transition:0.8s opacity 0.8s;  }  .spanner{    vertical-align:middle;    width:0;    height:100%;    display:inline-block;  }    @keyframes clipout {    from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }    50%  { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); }    51%   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }    to   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }  }  @keyframes clipin{    from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }    50%  { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }    to   { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }    }

<div class="banners">    <input type="radio" id="slide1" name="slides" checked="checked" />    <label class="image slide1" for="slide1">      <div class="content">        Slide 1      </div>      <div class="spanner"></div>    </label>    <input type="radio" id="slide2" name="slides"  />    <label class="image slide2" for="slide2">      <div class="content">        Slide 2      </div>      <div class="spanner"></div>    </label>    <input type="radio" id="slide3" name="slides"  />    <label class="image slide3" for="slide3">      <div class="content">        Slide 3      </div>      <div class="spanner"></div>    </label>  </div>

Basically, just use keyframes to animate the clip path. Get fancy with the z-indexes and some sibling selectors.