Блог

Главная - Вопросы по программированию - Как мне сделать анимацию css3 плавной?

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

#html #css

#HTML #css

Вопрос:

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

Вот ссылка на веб-сайт

Вот код:

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

Ответ №1:

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

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

Комментарии:

1. Большое вам спасибо!

Ответ №2:

Добавить position:absolute в img. Это может предотвратить повторный поток страницы. Также свойство transform может помочь передать работу на 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">

Комментарии:

1. Опять же, анимация все еще прерывистая в конце

2. Извините, я имел в виду абсолютную позицию.

3. Длительность составляет 5 секунд, а не 2 секунды

Ответ №3:

вы пробовали «легкий ввод-вывод»

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

Ответ №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

Метки: