How would I go about setting up this image sprite?

[javascriptcoding5678]

I am trying to set up an image sprite.

Using 2 image urls works: https://jsfiddle.net/xy0gsocf/1/

There should be a way to do this since I am able to with 2 image urls.

.panel-left {
  left: 0;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: left top;
  background-size: 200% auto;
  background-repeat: no-repeat;
}

.panel-right {
  right: 0;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: right top;
  background-size: 200% auto;
  background-repeat: no-repeat;
}

Here is my attempt at an image sprite.

https://jsfiddle.net/0e1okabt/1/

.panel-left,
.panel-right {
  left: 0;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

.panel-right {
  right: 0;
  background-position: 0px -320px;
  background-size: 100% 200%;
  background-repeat: no-repeat;
}

I tried this: https://jsfiddle.net/0e1okabt/4/

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 4s;
  overflow: hidden;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

.panel-left{
  left: 0;
}

.panel-right {
  right: 0;
  background-position: 0px -320px;
  background-size: 100% 200%;
  background-repeat: no-repeat;
}

[javascriptcoding5678]

This works: https://jsfiddle.net/cngk4vy7/3/

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all 8s ease;
  transition-delay: 1s;
  overflow: hidden;
  background: url("https://i.imgur.com/xssQZZs.png");
  background-position: 0 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
  background-position: top right;
}