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);
    });

});