CSS宽度动画不起作用

我尝试了一切，但我不知道为什么这些动画不起作用。有谁能够帮助我？CSS宽度动画不起作用

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

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

来源

2017-06-18 gab

在这里，你去....

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

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

来源

2017-06-18 10:17:03

啊，但我想要的初始值是自动，这可能吗？ – gab

你在说什么价值 –

也许它过于复杂，但它似乎工作:)

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

来源

2017-06-18 10:18:02

我怎么没有设定初始值？ – gab

我不确定是否可能没有一点javascript，因为根据转换描述，CSS3转换允许您在给定的持续时间内平稳地（从一个值到另一个值）更改属性值。“ –

好的，谢谢:) – gab

你可以过渡最小宽度，而不是宽度。你只能从一个值转换到另一个值，这就是为什么在“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>

来源

2017-06-18 11:23:37 WizardCoder

CSS宽度动画不起作用

回答

相关问题