Webkit轉換沒有懸停

Question

我做了以下簡單的動畫，其中圖像在鼠標懸停時增長，但我真正想要的是它發生沒有懸停，即頁面加載時。

HTML

<div id="first" class="animated grow"><img src="images/sunflower.png"></div> 

CSS

 /* GROW ANIMATION */ 
.grow img { 
    position: absolute; 
    bottom: 0; 
    height: 400px; 
    width: 160px; 

    -webkit-transition: all 5s ease; 
    -moz-transition: all 5s ease; 
     -o-transition: all 5s ease; 
     -ms-transition: all 5s ease; 
      transition: all 5s ease; 

} 

.grow img:hover { 
    width: 200px; 
    height: 500px; 
} 

我嘗試使用以下，但它不工作。

from {width: 160px; height: 400px;} 
to {width: 200px; height: 500px;} 

要麼是錯誤的路要走，要麼我沒有放在正確的地方。

Answer 1

在這裏你去：

animation: imganim 1s infinite linear both; 

@keyframes imganim { 
from {width: 160px; height: 400px;} 
to {width: 200px; height: 500px;} 
} 

JSFiddle

和循環動畫使用：

@keyframes imganim { 
0% {width: 160px; height: 400px;} 
50% {width: 200px; height: 500px;} 
100% {width: 160px; height: 400px;} 
} 

JSFiddle個

筆記：

• 沒有必要使用transition爲animation
• 用於定義動畫，你應該使用keyframes
• 已經所有現代瀏覽器中閱讀animation或transition沒有必要使用-webkit-或-moz-等。

Answer 2

你想要的是一個animation，而不是transition。在您想要動畫的元素上，爲動畫指定名稱（即動畫），並將動畫變量放入該關鍵幀動畫中。請參閱下面的完整佈局。不要忘記供應商前綴。

/* GROW ANIMATION */ 
 
.grow img { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 400px; 
 
    width: 160px; 
 
    -webkit-animation: animate 5s ease-in; 
 
    animation: animate 5s ease-in; 
 
} 
 

 
@-webkit-keyframes animate { 
 
    from { 
 
    width: 160px; 
 
    height: 400px; 
 
    } 
 
    to { 
 
    width: 200px; 
 
    height: 500px; 
 
    } 
 
} 
 
@keyframes animate { 
 
    from { 
 
    width: 160px; 
 
    height: 400px; 
 
    } 
 
    to { 
 
    width: 200px; 
 
    height: 500px; 
 
    } 
 
}

<div id="first" class="animated grow"><img src="http://dummyimage.com/400x160"></div>

Answer 3

你需要有@keyframes和時間在你的CSS，像這樣：

@keyframes example { 
    from {background-color: red;} 
    to {background-color: yellow;} 
} 

/* The element to apply the animation to */ 
div { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    animation-name: example; 
    animation-duration: 4s; 
} 

與高度/寬度值替換顏色值你要。

Answer 4

以下是解決方案：轉換規則未正確編寫以獲取該行爲。

.grow img { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 400px; 
 
    width: 160px; 
 
    animation-timing-function: ease; 
 
/* -webkit-transition: fadein all 5s; 
 
    -moz-transition: fadein all 5s; 
 
     -o-transition: fadein all 5s; 
 
     -ms-transition: fadein all 5s; 
 
      transition: fadein all 5s;*/ 
 
      
 
    animation-name: fadein; 
 
    animation-duration: 4s; 
 

 
} 
 

 
@keyframes fadein { 
 
    from {width: 160px; height: 400px;} 
 
to {width: 200px; height: 500px;} 
 
} 
 

 

 
/* Firefox < 16 */ 
 
@-moz-keyframes fadein { 
 
    from {width: 160px; height: 400px;} 
 
to {width: 200px; height: 500px;} 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadein { 
 
    from {width: 160px; height: 400px;} 
 
to {width: 200px; height: 500px;} 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes fadein { 
 
    from {width: 160px; height: 400px;} 
 
to {width: 200px; height: 500px;} 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes fadein { 
 
    from {width: 160px; height: 400px;} 
 
to {width: 200px; height: 500px;} 
 
}

<div id="first" class="animated grow"><img src="images/sunflower.png"></div>