Question

我最近一直在研究我的投资组合，但问题是我最后写的图像动画让人感到紧张。

这是代码：

  @keyframes mymove {
    0%   {top: 0px;}
    50% {top: 25px;}
    100%   {top: 0px;}
    }
    
    img {
        animation: mymove 5s infinite;
    }

<img src="http://pngimg.com/upload/small/basketball_PNG1096.png">

Answer 1

当移动很少且动画持续时间很长时（在5秒内你的情况为25px），就会发生这种情况，这意味着在较长时间内插值的值较少。

如果您增加top值或减少duration（如果同时执行这两项操作会更好），则不会出现这种锯齿状动画

Answer 2

你试过“轻松进入”

@keyframes mymove {
    0% {
        top: 0px;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    50% {
        top: 25px;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        top: 0px;
    }
}

img{
   animation: mymove 2s infinite ease-in-out;
}

Answer 3

将position:absolute添加到img。这可能会阻止页面的重新流动。此外，转换属性可能有助于将工作传递给GPU，因此动画更加流畅。

  @keyframes mymove {
    0%   {top: 0px;}
    50% {top: 25px;}
    100%   {top: 0px;}
    }
    
    img {
        animation: mymove 2s infinite;
        position:absolute;
        transform: translateZ(0);
    }

<img src="http://pngimg.com/upload/small/basketball_PNG1096.png">

Answer 4

.img {
  width: 200px;
  height: 200px;
  border: 10px solid #fff;
  -webkit-border-radius: 15px;
   border-radius: 15px;
  overflow: hidden;
}

.img:hover {
  cursor: pointer;
}

.morph {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
   transition: all 1s ease;
}

.morph:hover {
  border: 10px solid #fff;
   border-radius: 50%;
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);

}

<div class="morph img"><img alt="" src="img/image1.jpg" /></div>

请检查此链接： - http://1stwebdesigner.com/css3-animation-styles/#css3-animation

如何让我的css3动画流畅？

4 个答案: