HTML CSS JS Дергающая кнопка по горизонтали

Question

/* Функция для отодвигания меню на главной странице */

function openMenu(){
    document.querySelector(".sidebar").classList.toggle('active');
}

* {
  box-sizing: border-box;
  }
  .sidebar{
    position: fixed;
    width: 450px;
    background: #f7d2fa; /*Цвет выдвижного окошка*/
    opacity: 0.7;
    border-radius: 10px;
    right: -449px; 
    padding-bottom: 10px;
    -moz-transition: all 600ms;
    -webkit-transition: all 600ms;
    transition-duration: all 600ms; 
  }
  .sidebar.active{
    right: 20px;
  }
  .sidebar > ul  li  a:hover{color: #364237;} /*Расположение кнопки*/
  .toggle-btn{
    position: absolute; 
    right: 490px; /*Расположение кнопки от левого края*/
    top: 10px;/*Расположение кнопки сверху*/
    background: green; /*Цвет кнопки*/
    padding: 10px;
    border-radius: 15px;
    cursor: pointer;
  }
/*Линии в кнопке*/
  .toggle-btn span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: black; /*Цвет в статике*/
    margin: 4px 0;
  }

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="test.css">
      <meta charset="utf-8">
      <title></title>
    </head>
  <body>
    <div class="sidebar">
        <div class="toggle-btn" onclick="openMenu()">
          <span></span>
          <span></span>
          <span></span>
        </div>            
        <ul>
          <li><a></a></li>
          <li><a></a></li>
          <li><a></a></li>
        </ul>  
      </div>
     </section>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://unpkg.com/imask"></script>
  <script src="./test.js"></script>
  </body>
</html>

Кто может написать функцию движущей кнопки, а то в инете ничего похожего не нашел. Также буду благодарен сопутствующим ссылкам.

Есть кнопка открывающее меню справа. Я хочу чтобы она дергалась по горизонтали.

Влево(на половину своей длины)

Вправо(на половину своей длины)

Например так 5 раз, потом затихала на 3 секунды

После того как меню вдвинулось, кнопка становилась статичной

Answer 1

самый простой способ это добавить анимацию скажем на 8 секунду в блок

.toggle-btn{
    position: absolute; 
    right: 490px; /*Расположение кнопки от левого края*/
    top: 10px;/*Расположение кнопки сверху*/
    background: green; /*Цвет кнопки*/
    padding: 10px;
    border-radius: 15px;
    cursor: pointer;
    animation: move 8s linear infinite;

  }

сама анимация что-то типа такой, но вы тут можете скорость и количество итераций настроить под себя

@keyframes move {
  0%{
    transform: translateX(0)
  }
  10% {
        transform: translateX(-50%)

  }
   20%{
    transform: translateX(50%)
  }
   30%{
    transform: translateX(-50%)
  }
    40%{
    transform: translateX(50%)
  }
    50%{
    transform: translateX(-50%)
  }
   60%{
         transform: translateX(0)

  }
   70%{
         transform: translateX(0)

  }
   100%{
         transform: translateX(0)

  }
}

и, когда блок в состоянии открыт, то такой костыль может быть

  .sidebar.active > .toggle-btn{
   animation: move 0s linear infinite;

  }

Вот посмотрите https://jsfiddle.net/marader/4sL7fx8h/21/

БЛОГ НА HUSL

HTML CSS JS Дергающая кнопка по горизонтали

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