以屏幕调整为中心的CSS关键帧（响应式）

Question

我是CSS关键帧的新手，我已经完成了以下代码，我的问题是，当我尝试重新调整浏览器大小时，我希望我的动画完全位于屏幕中心。还提供代码片段。你可以帮我解决这个问题。

＆＃13;

＆＃13;

div.background {
    width: 100%;
    position: relative;
    height:300px;
    border-bottom: 1px solid #000;
    overflow:hidden;
}
img.animation {
    left:-300px;
    position: relative;
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 10s infinite;
    animation-delay: 2s;
    overflow:hidden;
    z-index: 2;
}
img.animation2 {
    left:-1000px;
    position: absolute;
    -webkit-animation: mymove2 10s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove2 10s infinite;
    animation-delay: 2s;
    overflow:hidden;
    z-index: 1;
}
img.animation3 {
    left:-1000px;
    position: absolute;
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 10s infinite;
    animation-delay: 3s;
    overflow:hidden;
    z-index: 3;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove2 {
    0%   {left: -300px;}
    25%  {left:-300px;}
    30%   {left: 40%;}
    31%  {left: 39%;}
    32% {left: 40%;}
    33%  {left: 39%;}
    34% {left: 40%;}
    70% {left: 40%;}
    75%  {left: 100%; opacity: 1}
    100% {left: 100%; opacity: 0}
}

/* Standard syntax */
@keyframes mymove2 {
    0%   {left: -300px;}
    25%  {left:-300px;}
    30%   {left: 40%;}
    31%  {left: 39%;}
    32% {left: 40%;}
    33%  {left: 39%;}
    34% {left: 40%;}
    60% {left: 40%;}
    65%  {left: 100%; opacity: 1}
    100% {left: 100%; opacity: 0}
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {left: -300px;}
    5%   {left: 40%;}
    95%  {left: 40%; opacity: 1}
    100% {left: 100%; opacity: 0}
}

/* Standard syntax */
@keyframes mymove {
    0%   {left: -300px;}
    5%   {left: 40%;}
    95%  {left: 40%; opacity: 1}
    100% {left: 100%; opacity: 0}
}

＆＃13;

<div class="background"><img class="animation" src="http://i.imgur.com/TdeyRAx.png" /><img class="animation2" src="http://i.imgur.com/yGkcaAz.png" /><img class="animation3" src="http://i.imgur.com/fSUlLle.png" /></div>

＆＃13;

＆＃13;

＆＃13;