Как сделать анимацию css3 гладкой?

В последнее время я работаю над своим портфолио, но проблема в том, что анимация изображения, которую я написал в конце концов, дрожит.Как сделать анимацию css3 гладкой?

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">

источник

2016-10-15 Gummybaar

Это происходит, когда движение очень мало и продолжительность анимации долго (в вашем случае 25px в 5 секундах), это означает, что меньше значения интерполировать в течение длительной продолжительности.

Если увеличить значение top или уменьшить duration (лучше, если вы оба), вы не будете иметь эту рваную анимацию

источник

2016-10-15 14:29:37

Большое вам спасибо! – Gummybaar

Добро пожаловать, пожалуйста, отметьте ответ, если это поможет –

есть у попытался "легкость в выкатывания"

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

источник

2016-10-15 14:12:57 Rahul

У меня, не делал дерьмо. – Gummybaar

Добавить 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">

источник

2016-10-15 14:22:08

Опять же, анимация по-прежнему нестабильная в конце – Gummybaar

К сожалению, я имел в виду положение абсолютное. –

Продолжительность 5 с, а не 2 с –

.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

источник

2016-10-15 14:45:52

Как сделать анимацию css3 гладкой?

ответ

Смежные вопросы