@ -webkit-keyframes動畫爲什麼不起作用？

我的問題是@ -webkit-keyframes動畫不起作用，我沒有看到任何線索......所有其他部分工作良好，包括背景顏色和字體顏色轉換。這裏是HTML和CSS：@ -webkit-keyframes動畫爲什麼不起作用？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>test</title> 
<link rel="stylesheet" href="test.css" /> 
</head> 
<body id="body"> 

<nav> 
    <ul id="nav"> 
     <li><a href="#" class="link"><div class="content"><span class="span">About</span></div></a></li> 
     <li><a href="#" class="link"><div class="content"><span class="span">Skills</span></div></a></li> 
     <li><a href="#" class="link"><div class="content"><span class="span">Works</span></div></a></li> 
     <li><a href="#" class="link"><div class="content"><span class="span">Contact</span></div></a></li> 
    </ul> 
</nav><br /> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="test.js"></script> 
<script type="text/javascript" src="jquery_ui.js"></script> 
</body> 

</html>

CSS：

#nav{ 
    list-style:none; 
    margin:40px auto; 
    padding:0; 
    width: 820px; 
} 
#nav li{ 
    width: 200px; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
    float: left; 
    background: #00D8CC; 
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
    margin-right: 2px; 
    -webkit-transition: all 300ms linear; 
} 

#nav li:last-child { 
    margin-right: 0px; 
} 

#nav li a{ 
    display:block; 
    text-align: center; 
    position: relative; 
    height: 100%; 
    color: #333; 
} 

.content { 
    position: absolute; 
    left: 0px; 
    width: 100%; 
    height: 50%; 
    top: 50%; 
} 

.span { 
    font-size: 30px; 
    opacity: 0.8; 
    text-align: center; 
    line-height: 40px; 
    -webkit-transition: all 300ms linear; 
} 

#nav li:hover { 
    background-color: #00AAAA; 

} 

#nav li:hover .span{ 
    color: green; 
    -webkit-animation: move 300ms ease; 
} 

@-webkit-keyframes move { 
    from { 
      -webkit-transform: translateX(-100%) rotate(-90deg); 
    } 
    to { 
      -webkit-transform: translateX(0%) rotate(0deg); 
    } 
}

謝謝。

來源

2012-11-16 user1605763

您確定'.span'是一個css類，而不是一個元素（'span'）嗎？ – Duopixel

你使用什麼瀏覽器？ webkit關鍵字只支持webkit引擎，即Safari和Chrome（最爲突出的）。 FireFox改爲使用@ -moz-keyframes和Opera @ -o-keyframes。 – Cravid

是的，我將span標籤命名爲class =「span」，所以我認爲無論是「span」還是「.span」都沒關係。我正在使用Chrome。 – user1605763

這是<span>的顯示問題。如果你將它設置爲display: block;它應該工作。見http://jsfiddle.net/ryanbrill/mdb7X/

來源

2013-02-27 17:08:07 ryanbrill

幾個快速點，

1 - 導航和跨度均爲元素不是ID或類

2 - 你沒有@keyframes移動，或過渡所有的屬性來激活它加上你以毫秒爲單位的調整會導致一些新的瀏覽器掛起，因爲它們似乎都期望0.3s十進制值。

2 - 此外，此級別的動畫和某些轉場只能應用於包含您要製作動畫的項目的包含元素，即div，nav，標題，節，文章，頁腳等。一種解決方案是使用display：inline-blocks;對齊方法並將各個部分放置在單獨的容器中，這將要求第一個孩子具有suedo元素:: before（以及第二個：之前支持一些較舊的瀏覽器）並且主容器具有suedo元素::之後（;之後）強制調整正確對齊。在'Codr0ps'網站上有幾個優質示例 - http://tympanus.net/codrops/

來源

2013-09-21 20:13:49 Weedy101

@ -webkit-keyframes動畫爲什麼不起作用？

回答

相關問題