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>