Анимация на чистом JavaScript или jQuery

Question

#block {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: yellow;
  animation: block 3s linear infinite;
}

@keyframes block {
  0% {
    left: 0;
    background-color: red;
  }
  50% {
    left: calc(100% - 100px);
    background-color: green;
  }
  500% {
    left: 0;
    background-color: red;
  }
}

<div id="block"></div>

Можно ли такую анимацию сделать на чистом JavaScript или jQuery?

Answer 1

JavaScript

var block = document.querySelector('#block');
var player = block.animate([{
    left: "0",
    backgroundColor: "red"
  },
  {
    left: "calc(100% - 100px)",
    backgroundColor: "green"
  }
], {
  duration: 1500,
  iterations: Infinity,
  direction: 'alternate',
  easing: "linear"
});

#block {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

<div id="block"></div>

jQuery

(function animation() {
  $("#block")
    .animate({
      left: '100%',
      'margin-left': '-100px',
      backgroundColor: "green"
    }, 1500)
    .animate({
      left: '0',
      'margin-left': '0px',
      backgroundColor: "red"
    }, 1500, animation)
}());

#block {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="block"></div>

БЛОГ НА HUSL

Анимация на чистом JavaScript или jQuery

Ответы (1 шт):