闪烁单个图像以显示它在屏幕上移动

Question

我正在尝试在屏幕上旋转一个芭蕾舞女演员的形象。我有两个图像，分别称为ballerinaleft和ballerinaright。我希望他们交替出现和消失，以使它的幻想在屏幕上回旋。
我创建了一个称为twirling的div类，并将以下代码插入了CSS。

#twirling @-webkit-keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
     0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes blink {
     0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#twirling img {
    -webkit-animation: blink 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1.5s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1.5s:
    -o-animation-iteration-count: infinite; 
}
#twirling img:nth-child(even) {
    animation-delay: 0.5s;
}
@media only screen and (max-width: 1026px) {
    #twirling {
        display: none;
    }
}

运行网站时，它是所有权利的直线，然后向左闪烁。我希望它一次可以一次成像。请帮助我代码或如果不可能的话。我感谢所有高级帮助。