.aaa{ width:100%; height:100%}
.aaa img{ display:block; width:100%;}
.bbb_wrap{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55); box-sizing: border-box; padding-top: 25%; display:none; z-index:99}
.bbb_box{ height:18.625rem; width:100%; position:relative}
.xjr_tu{ position:absolute; width:5rem;top:48%;left: 50%;
transform: translate(-50%, -50%);
            animation: change 0.5s;
            -moz-animation: change 0.5s;    
            -webkit-animation: change 0.5s;    
            -o-animation: change 0.5s;

}
@keyframes change{
	from {width: 0;opacity: 1;}
	to {width: 5rem;opacity: 1;}
}

.xjr_tu img{ display:block; width:100%;}
#Rotation{ width:90%; margin:0 0 0 5%;}
#Rotation img{ display:block; width:100%;}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}