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

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); }  
}

  
  
    

      Slide 1
    
    

  
  
  
    

      Slide 2
    
    

  
  
  
    

      Slide 3
    
    

  

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