如何移动文本作为发布CSS动画对象的下一个

Question

我有一个内联块中有一行图像的网页。这是图片的图片。

我有一个动画设置，所以当你点击一个图像时，它会向右滑动，如下所示：

我想要的是文本浮动到左边并且在图像旁边。我试过漂浮左，但这不起作用。这是我用来输入HTML的jquery：

 $(this).after("<h3 style='display: inline'>testgggggggggggggggggggggggggggggg</h3>");

这是图像的CSS：

.imageFace {
 margin-right: 10px;
 margin-top: 10px;
-webkit-animation: animation 2000ms linear both;
animation: animation 2000ms linear both;
-webkit-animation-play-state: paused;
}

以下是图片的html：

<div style="width:1000px;margin:0px auto;color:white;clear: both;">
        <h2 id="after">Our Team</h2>
        <div id="faces">
            <img src="facePlacehold.gif" class="imageFace" id="1">
            <img src="facePlacehold.gif" class="imageFace" id="2">
            <img src="facePlacehold.gif" class="imageFace" id="3">
            <img src="facePlacehold.gif" class="imageFace" id="4">
            <img src="facePlacehold.gif" class="imageFace" id="5">
            <img src="facePlacehold.gif" class="imageFace" id="6">
            <img src="facePlacehold.gif" class="imageFace" id="7">
            <img src="facePlacehold.gif" class="imageFace" id="8">
            <img src="facePlacehold.gif" class="imageFace" id="9">
            <img src="facePlacehold.gif" class="imageFace" id="10">
            <img src="facePlacehold.gif" class="imageFace" id="11">
            <img src="facePlacehold.gif" class="imageFace" id="12">
        </div>
    </div>

我已将网站上传到github：http://thomfur.github.io/

以下是来源：https://github.com/thomfur/thomfur.github.io