どのように私のCSS3アニメーションを滑らかにするのですか？

Question

私は最近、私のポートフォリオに取り組んできましたが、問題は、私が最後に気をつけたイメージアニメーションだということです。ここで

Here is a link to the website

は、コードは次のとおりです。

@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

uがIMGにposition:absoluteを追加 "使いやすさにアウト"

@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

を試してみました。これにより、ページの再フローが防止されます。また、変換プロパティは、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