CSS动画文本到图像

Question

我期待获得的效果是用户第一次看到没有箭头的提示文本，然后文本缩小到0％宽度，您将只看到箭头。容器也应该只有足够的空间来填充其中的文本，只需填充一点点即可。不知道这是否足够清楚。因此，容器缩小了内容的大小，并且在一段时间之后内容从文本变为图像。

这是我的HTML下面。

<a href="javascript:void(0);" class="ScrollDownArrow"> 
    <div class="Relative"> 

     <div class="Hint"> 
      <p>Skip to next section</p> 
      <img src="Assets/IMG/"INSERT ARROW IMG HERE".png" /> 
     </div> 
    </div> 
</a> 

CSS

*{ 
    padding:0; 
    margin:0; 

} 

.Hint 
{ 
    display: block; 
    height: 38px; 
    line-height: 34px; 
    text-align: center; 
    border:2px solid #f6473e; 
    border-radius: 20px; 
    -o-border-radius: 20px; 
    -moz-border-radius: 20px; 
    -wbkit-border-radius: 20px; 
    text-transform: uppercase; 
    color: #fff; 
    white-space: nowrap; 
    transition: width 0.8s ease 2.6s, margin 0.8s ease 2.6s , padding 0.8s ease 2.6s; 
    -o-transition: width 0.8s ease 2.6s, margin 0.8s ease 2.6s, padding 0.8s ease 2.6s; 
    -moz-transition: width 0.8s ease 2.6s, margin 0.8s ease 2.6s, padding 0.8s ease 2.6s; 
    -webkit-transition: width 0.8s ease 2.6s, margin 0.8s ease 2.6s, padding 0.8s ease 2.6s; 
    width:100%; 
    overflow:hidden; 
    position:relative; 
    margin:0; 
    padding: 0 20px; 
} 


.Hint.Show 
{ 


} 
.Hint.Show p 
{ 
    display:inline-block; 

} 
.Hint p 
{ 
    color:#000; 
    width:100%; 
    font-size: 0.8em; 
    display:none; 
    transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    -o-transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    -moz-transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    -webkit-transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    } 
.Hint.Show img 
{ 
    display:none; 
} 
.Hint img 
{ 

    display:inline-block; 
    width:100%; 
    max-width:38px; 
    transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    -o-transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    -moz-transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    -webkit-transition: width 0.8s ease 2.6s, opacity 0.8s ease 2s; 
    position:absolute; 
    top:-2px; 
    transform:translateX(-50%); 
    -o-transform:translateX(-50%); 
    -moz-transform:translateX(-50%); 
    -webkit-transform:translateX(-50%); 
} 

.ScrollDownArrow 
{ 
    display: block; 
    height: 38px; 
    width: auto; 
    position: absolute; 
    bottom: 10px; 
    left: 50%; 
    transform:translateX(-50%); 
    -o-transform:translateX(-50%); 
    -moz-transform:translateX(-50%); 
    -webkit-transform:translateX(-50%); 
    background-size: 100%; 
    z-index: 1000; 
    transition: bottom 0.8s ease 1.6s, width 0.8s ease 0s; 
    -o-transition: bottom 0.8s ease 1.6s, width 0.8s ease 0s; 
    -moz-transition: bottom 0.8s ease 1.6s, width 0.8s ease 0s; 
    -webkit-transition: bottom 0.8s ease 1.6s, width 0.8s ease 0s; 
    -webkit-backface-visibility: hidden; 
} 

JS

$(document).ready(function(){ 
    $('.ScrollDownArrow').click(function(){ 
     if ($(this).hasClass('Clicked')){ 
      $(this).removeClass('Clicked'); 
      $('.Hint').removeClass('Show'); 
     }else{ 
      $(this).addClass('Clicked'); 
      $('.Hint').addClass('Show'); 
     } 

    }); 
}); 

将是理想的，如果提示是由边框包围，整个容器的收缩以适应里面的文本和文本也可以变化在宽度，所以我不能使用固定的宽度。

这里有一个小提琴，我刚才做的非常接近我使用的代码http://jsfiddle.net/bfh55npj/3/问题是，宽度不是过渡，而是只是捕捉到它需要的宽度。

编辑：http://jsfiddle.net/bfh55npj/6/更新了小提琴的答案，我正在寻找的情况下，任何人都想要使用它。这种效果在反向时效果不佳，但我想只需要以某种方式工作，所以这很好，我已经考虑了相反的情况，并且它仅用于显示目的，因此您可以在不刷新的情况下再次执行动画。

Answer 1

我想出了这个jQuery代码：

$(document).ready(function(){ 
    $(".ScrollDownArrow").click(function(){ 
     if($(".ScrollDownArrow").hasClass("Clicked")){ 
      $(".Hint img").fadeOut(500); 
      $(".Hint p").delay(500)/*wait on fadeout*/.animate({width: 200} /*Unfortunately width: 100% does not seem to work so I took a px value :(*/, 1000).animate({opacity:1}, 500); 
      $(".ScrollDownArrow").removeClass("Clicked"); 
     }else{ 
      $(".Hint p").animate({opacity:0.01}/*fade p out without making its width disappear for the width animation*/, 500).animate({width: 0}, 1000); 
      $(".Hint img").delay(1500).fadeIn(500); 
      $(".ScrollDownArrow").addClass("Clicked"); 
     } 
    }); // End Click 
});//End Ready 

，如果你想使宽度适应一段你可以把宽度值在100％，在jQuery的脚本，但不幸的是，动画似乎如果你这样做会失败。我会开始一个新的问题，看看有人知道这个问题的解决方案。

我也删除了css动画，因为我们正在使用jquery，并且同时使用两者都有点令人困惑。这里是JSFiddle。