CSS宽度动画不起作用

Question

我尝试了所有方法，但我不知道为什么这些动画不起作用。谁能帮帮我？

.link {
    float:right;
    clear:both;
    padding:30px;
    font-size:20px;
    background-color: yellow;
    color: #333;
    font-family: Dosis;
    font-weight: 700;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    text-align:right;
}

.link:hover {
    width:100%;
    transition: width 2s;
}

<div class="link">Something</div>
<div class="link">about</div>
<div class="link">you</div>
<div class="link">makes</div>
<div class="link">me</div>

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

Answer 1

也许它过于复杂，但它似乎有效:)

$(document).ready(function() {
    $('.link').each(function() {
    var value = $(this).width();
    $(this).css({"width":value});
    $(this).hover(function(){
    $(this).css({"width":"100%"});
    },function(){
    $(this).css({"width":value});
    })
    })
});

.link {
  width: auto;
   float:right;
    clear:both;
    padding:30px;
    font-size:20px;
    background-color: yellow;
    color: #333;
    font-family: Dosis;
    font-weight: 700;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    text-align:right;
}

.link:hover {
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">Something</div>
<div class="link">about</div>
        <div class="link">you</div>
        <div class="link">makes</div>
        <div class="link">me</div>