Переход 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. На элементе, на котором вы хотите включить анимацию, вы даете анимации имя (то есть animate) и поместите переменные анимации внутри этой анимации ключевого кадра. См. Ниже полный макет. Не забывайте о префиксах поставщика.

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