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

您的CSS中需要 @keyframes 和持续时间，如下所示：

@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

以下是解决方案：转换规则未正确编写以获取该行为。

＆＃13;

.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;} 
}

＆＃13;

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

＆＃13;

没有悬停的Webkit过渡

4 个答案: