.cr-containerinput:checked后面span全飘走？

.cr-bgimg div span{

width: 100%;

height: 100%;

position: absolute;

left: -150px;

top: 0;

background-repeat: no-repeat;

-webkit-transition:left .5s ease-in-out;

  -moz-transition:left .5s ease-in-out;

   -ms-transition:left .5s ease-in-out;

       transition:left .5s ease-in-out;

/*-webkit-transition:transform .5s ease-in-out;

  -moz-transition:transform .5s ease-in-out;

   -ms-transition:transform .5s ease-in-out;

       transition:transform .5s ease-in-out;*/

}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(1){

background: url("../images/1.jpg");

}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(2){

background: url("../images/2.jpg");

}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(3){

background: url("../images/3.jpg");

}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(4){

background: url("../images/4.jpg");

}

.cr-bgimg div:nth-child(1) span{

background-position: 0 0;

}

.cr-bgimg div:nth-child(2) span{

background-position: -150px 0;

}

.cr-bgimg div:nth-child(3) span{

background-position: -300px 0;

}

.cr-bgimg div:nth-child(4) span{

background-position: -450px 0;

}

.cr-container input:checked ~ .cr-bgimg span{

-webkit-animation: slideOut 0.6s ease-in-out;

  -moz-animation: slideOut 0.6s ease-in-out;

   -ms-animation: slideOut 0.6s ease-in-out;

    -o-animation: slideOut 0.6s ease-in-out;

       animation: slideOut 0.6s ease-in-out;

}

@-webkit-keyframes slideOut{

from { left: 0; }

to { left: 150px; }

}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg > div span:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg > div span:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg > div span:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg > div span:nth-child(4){

z-index: 10;

left: 0;

/*-webkit-transform:translateX(150px);

  -moz-transform:translateX(150px);

   -ms-transform:translateX(150px);

       transform:translateX(150px);*/

-webkit-animation:none;

  -moz-animation:none;

   -ms-animation:none;

    -o-animation:none;

       animation:none;

}

.cr-titles h3{

position: absolute;

width: 100%;

text-align: center;

color: #fff;

opacity: 0;

text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

z-index: 10000;

top: 50%;

-webkit-transition:opacity .8s ease-in-out;

  -moz-transition:opacity .8s ease-in-out;

   -ms-transition:opacity .8s ease-in-out;

       transition:opacity .8s ease-in-out;

}

.cr-titles h3 span:nth-child(1){

display: block;

font-size: 70px;

font-family: "bebas";

letter-spacing: 7px;

}

.cr-titles h3 span:nth-child(2){

display: block;

font-size: 14px;

padding: 10px;

font-family: Cambria,Palation,"bebas";

background: rgba(104,171,194,0.9);

letter-spacing: 0;

font-style: italic;

}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){

opacity: 1;

}