CSS3形状和动画 - 箭头

Question

如下图所示，我必须创建此图像并为其设置动画。 我本来打算不实际使用图像，而是使用CSS3 border-radius这样做。 因此，下面是我要使用的HTML和CSS。

我想要的动画是箭头应该从底部开始向上移动并沿着流向上移动继续显示，用流向右移动直到箭头指针结束。 但是我真的不确定该怎么做。 我必须支持IE8 +，Chrome，FF浏览器。

HTML：

<div class="years">
    <article>
        <figure>
            <div class="vrt-bar"></div>
            <div class="hrzt-bar"></div>
            <div class="arrow"></div>
        </figure>
    </article>
</div>

CSS：

.years article figure {
    height:auto;
    position:relative;
}
.years article figure .vrt-bar {
    width:34px;
    height:192px;
    behavior: url(css/PIE.htc);
    border-radius:25px 0 25px 25px;
    -webkit-border-radius: 25px 0 25px 25px;
    -moz-border-radius: 25px 0 25px 25px;
    float:left;
    background:#00b9d3;
    position:relative;

}
.years article figure .hrzt-bar {
    width:143px;
    height:32px;
    background:#00b9d3;
    margin-left:34px;
}
.years article figure .arrow {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #00b9d3;
    position:absolute;
    top:-10px;
    left:177px;

}

jsfiddle： http ： //jsfiddle.net/KgAe4/

有人可以帮忙吗？

Answer 1

试试这个，我想以下任何一个都是您所需要的

工作演示1

我已经编辑了你的css和代码

$('.arrow-up').animate({
    'top': '-5px'
}, 1000, function () {
    $(this).addClass('arrow').removeClass('arrow-up');
    $('.arrow').animate({
        'left': '177px'
    }, 1000);
});

要么

另一种类型就在这里

我已经编辑了你的css和代码

工作DEMO2

$(document).ready(function () {
    $('.arrow-up').animate({
        'top': '-10px'
    }, 1000, function () {
        $(this).addClass('arrow').removeClass('arrow-up');
        $('.arrow').animate({
            'left': '177px'
        }, 1000);
    });
    $('.vrt-bar').animate({'height':'192px'},1000,function(){
    $('.hrzt-bar').delay(80).animate({'width':'143px'},1000);
    });

});