CSS宽度动画不起作用

Question

我尝试了一切，但我不知道为什么这些动画不起作用。有人可以帮助我吗？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等

Answer 1

可能它过于复杂但似乎有效：）

＆＃13;

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你走了......

＆＃13;

＆＃13;

.link {
            float:right;
            clear:both;
            padding:30px;
            font-size:20px;
            width: 100px;
            height: 100px;
            color: #333;
            font-family: Dosis;
            font-weight: 700;
            text-transform:uppercase;
            text-decoration:none;
            background: yellow;
            -webkit-transition-property: width; /* Safari */
            -webkit-transition-duration: 2s; /* Safari */
            transition-property: width;
            transition-duration: 2s;
        }

        .link:hover {
             width: 100%;
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以转换最小宽度而不是宽度。您只能从一个值转换到另一个值，这就是为什么在“auto”和“100％”之间进行转换不起作用。

.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: min-width 1s ease-in-out;
    -moz-transition: min-width 1s ease-in-out;
    -o-transition: min-width 1s ease-in-out;
    transition: min-width 1s ease-in-out;
    text-align:right;
    min-width:0;
}

.link:hover {
    min-width:100%;
    -webkit-transition: min-width 1s ease-in-out;
    -moz-transition: min-width 1s ease-in-out;
    -o-transition: min-width 1s ease-in-out;
    transition: min-width 1s ease-in-out;
}

<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>