Блог

Главная - Вопросы по программированию - Анимация CSS. Сдвиньте на 10 секунд, а затем бесконечно двигайтесь вверх и вниз

Анимация CSS. Сдвиньте на 10 секунд, а затем бесконечно двигайтесь вверх и вниз

#css #css-animations

#css #css-анимации

Вопрос:

В настоящее время у меня «плавающее»изображение. Таким образом, он перемещается вверх и вниз в течение 10 секунд. Но то, что я действительно хотел бы, чтобы это было сделано, это скользить прямо с холста в течение 10 секунд, а затем бесконечно перемещаться.

Код, который у меня есть сейчас, просто заставляет его перемещаться вверх и вниз, и я изо всех сил пытаюсь частично добавить слайд. Я новичок в CSS-анимации, поэтому буду признателен за любую помощь.

Это то, что у меня есть до сих пор.

 .shake-vertical {
    -webkit-animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes shake-vertical {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

@keyframes shake-vertical {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

Ответ №1:

Учитывая, что ваше изображение имеет class значение ball . Вы можете добавить этот CSS в свой Existing CSS:

 @keyframes slide-in {
    from{
        margin-right: -100px;
    }
    to{
        margin-right: 0;
    }
}
.ball{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    float: right;
    animation:  slide-in 10s forwards,/*forwards keeps the ball at final position*/
                shake-vertical 15s infinite 10s both;
                /*
                 * Two animations applied
                 * comma separated
                 * shake-vertical has a 10 second delay specified by '10s'
                 * the delay should be same as the duration of first animation
                */
}

Я добавил комментарии для объяснения, но если вам нужно больше, не стесняйтесь комментировать.

Ответ №2:

Вы можете установить для объекта анимацию скольжения на 10 секунд, а в событии animationend изменить его класс на анимацию встряхивания.

Добавьте CSS что-то вроде этого:

 @keyframes slidein {
0% {
  transform: translateX(100vw);
}
100% {
  transform: translateX(50vw);
}
}
   .slidein {
      animation-name:slidein;
      animation-duration:10s;
      animation-fill-mode: follow;
    }

    .shake {
      animation-name: shake-vertical;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }

}

и JavaScript что-то вроде этого

   obj.addEventListener("animationend", function () {
    obj.classList.remove('slidein');
    obj.classList.add('shake');
  });

Пример с простым скользящим квадратом в фрагменте. 

 <!DOCTYPE html>
<html>
<head>
<style>
@keyframes slidein {
0% {
  transform: translateX(100vw);
}
100% {
  transform: translateX(50vw);
}
}

@keyframes shake-vertical {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}
#obj {
  position: relative;
  width: 50px;
  height: 50px;
  top: 50px;
  background-color:magenta;
  animation-delay:0s;
}

.slidein {
  animation-name:slidein;
  animation-duration:10s;
}

.shake {
  left: 50vw;
  animation-name:shake-vertical;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

</style>
</head>
<div id="obj" class="slidein"></div>
<script>
  var obj = document.getElementById('obj');
  obj.addEventListener("animationend", function () {
    obj.classList.remove('slidein');
    obj.classList.add('shake');
  });
</script>
</html>