CSS3 过渡不起作用

Posted 2023-03-06

【中文标题】CSS3 过渡不起作用

【英文标题】：CSS3 transition is not working

【发布时间】：2015-01-16 02:44:20

【问题描述】：

我正在尝试让 div 的背景颜色进行过渡，但似乎没有任何效果。我曾尝试在此处和其他网站上进行研究，但没有发现任何可行的方法。非常感谢任何帮助。

这是 CSS：

.nav a:hover

    color:black;
    background-color:white;


.nav

    width:200px;
    position:relative;
    left:10px;
    top:125px;
    background-color:black;
    font-size:1.4em;
    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
    text-align:center;
    color:white;
    text-decoration:none;
    vertical-align:middle;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    transition: width 2s linear;

【问题讨论】：

CSS transition shorthand with multiple properties?的可能重复

【参考方案1】：

我在这里看到两个问题：

1) 您在 .nav 元素上定义过渡，但仅在悬停时更改 a 元素的颜色

2) 您只指定宽度的过渡，而不是背景颜色

您可能正在寻找以下内容：

.nav a 
  -webkit-transition: all 2s linear;
  -moz-transition: all 2s linear;
  transition: all 2s linear;
 

.nav a:hover

  color:black;
  background-color:white;



.nav

width:200px;
position:relative;
left:10px;
top:125px;
background-color:black;
font-size:1.4em;
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
text-align:center;
color:white;
text-decoration:none;
vertical-align:middle;

【参考方案2】：

这是我从 CSS-Tricks (http://css-tricks.com/almanac/properties/t/transition/) 中提取的您想做的简单版本。

http://jsfiddle.net/vp5hg339/1/

它使用 CSS3 过渡和缓动。

nav 
  height:100px;
  width:100px;
  transition: background-color 0.5s ease;
  background-color: red;

nav:hover 
  background-color: green;

【参考方案3】：

你来了

.nav a
  color: white;
  background-color: black;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;

.nav a:hover 
  color: black;
  background-color: white;

.nav 
  width: 200px;
  position: relative;
  left: 10px;
  top: 125px;
  background-color: black;
  font-size: 1.4em;
  font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
  text-align: center;
  color: white;
  text-decoration: none;
  vertical-align: middle;      

<div class="nav">
  <a href="#">Something</a>
</div>

【参考方案4】：

感谢各位的帮助。我只是在那儿有宽度，因为我正在玩其他东西以使其正常工作而忘记更改它。如您所知，它正在将过渡放在 .nav a 上，而不仅仅是真正做到的 .nav。 干杯。