html - 背景画像を:afterセレクターに表示するにはどうすればよいですか?

Question

だから私はここにあるコーナー インジケーターアニメーションが大好きです: http://tympanus.net/Development/CreativeLoadingEffects/

現在、:after セレクター内で再生される CSS アニメーションがあります。
私はファイルをダウンロードし、以下の逆方向エンジニアリングを試みました。基本的に、CSS アニメーションの代わりに、このアニメーション gif を角の三角形の内側で再生したいと考えています。

私のデモ: http://leongaban.com/_stack/after/

jsFiddle: http://jsfiddle.net/leongaban/vzmPm/3/

注：ボタンの上にある回転する画像は、ボタンをクリックしたときに角の三角形の内側に表示しようとしているものです。

背景画像を :after div に表示する方法を知っていますか?

/* Loading circle idea from http://codepen.io/Metty/details/lgJck */
.la-anim-10::before,
.la-anim-10::after {
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
    position: absolute;
    display: block;
}

.la-anim-10::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: #bb344f;
    border-left-color: #bb344f;
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
    -webkit-animation: rotation 3s linear infinite;
    animation: rotation 3s linear infinite;
}

.la-anim-10::after {
    width: 77px;
    height: 77px;
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
}