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

试试这个 我猜以下任何一个都是你需要的

正在工作 DEMO1

我已经编辑了你的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);
    });

});