Математической маятник

336
20 декабря 2016, 23:00

И так у нас есть математический маятник

После нажатие на кнопку запуск к картинке добавляется класс .objectAnimation( он описывает анимацию), надо сделать что колебания маятника со временем затухали! 

/*Добавляем на кнопку анимацию*/ 
$(".st").click(function() { 
  $("#Object2").toggleClass("objectAnimation"); 
});
.objectAnimation { 
  display: inline-block; 
  transform-origin: 50% 0px; 
  animation-name: spin; 
  animation-duration: 550ms; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out; 
  animation-direction: alternate; 
} 
@-webkit-keyframes spin { 
  0% { 
    -webkit-transform: rotate(-25deg); 
  } 
  100% { 
    -webkit-transform: rotate(25deg); 
  } 
} 
@keyframes spin { 
  0% { 
    transform: rotate(-25deg); 
  } 
  100% { 
    transform: rotate(25deg); 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Возможно можно сделать так, чтобы с каждой секундой менялись 

transform:rotate(25deg);

Или как-то так!

Answer 1

Если хотите, что бы блок качался больше времени, нужно добавить больше промежных отклонений в CSS

/*Добавляем на кнопку анимацию*/  
$('button').click(function(){ 
  clearInterval(time); 
  $("#Object2").toggleClass("objectAnimation"); 
  var time = setTimeout(function() { 
    $("#Object2").removeClass("objectAnimation"); 
  }, 5000); // Указать время, как в CSS 
});
#Object2 { 
  width:10px; 
  height:200px; 
  background-color:red; 
  margin-left:250px; 
} 
.objectAnimation  { 
    transform-origin: 50% 0px; 
    animation-name: spin; 
    animation-duration: 5000ms; /* Указать время, как в JS */ 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    animation-direction: alternate; 
    -webkit-transform:rotate(-25deg); 
} 
@-webkit-keyframes spin { 
        0% { 
          -webkit-transform:rotate(-25deg); 
        } 
        10% { 
          -webkit-transform:rotate(25deg); 
        } 
        20% { 
          -webkit-transform:rotate(-20deg); 
        } 
        30% { 
          -webkit-transform:rotate(20deg); 
        } 
        40% { 
          -webkit-transform:rotate(-15deg); 
        } 
        50% { 
          -webkit-transform:rotate(15deg); 
        } 
        60% { 
          -webkit-transform:rotate(-10deg); 
        } 
        70% { 
          -webkit-transform:rotate(10deg); 
        } 
        80% { 
          -webkit-transform:rotate(-5deg); 
        } 
        90% { 
          -webkit-transform:rotate(5deg); 
        } 
        100% { 
          -webkit-transform:rotate(0deg); 
        } 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Object2"></div> 
<button>Раскачать</button>

READ ALSO
Как сделать авто высоту блока через jquery? [требует правки]
jQuery

Как сделать авто высоту блока через jquery? [требует правки]

Нужно было сделать скосы у блоков, сделан через skew и минусовый topи после того как подвинул все 12 экранов, снизу под футером осталось место,...

 322
Как правильно остановить рекурсию?
jQuery

Как правильно остановить рекурсию?

Помогите пожалуйста, есть функция, суть ее - это сделать эффект текста, который набираетсяТо есть при переключении слайда она принимает 2 фразы:...

 318
Код работает через раз
jQuery

Код работает через раз

Добрый вечерНе могу несколько дней разобраться с одним кодом, работает но почему то через раз (на первом изображение работает, на втором нет,...

 297
Нужен бот для Facebook [требует правки]
c++

Нужен бот для Facebook [требует правки]

Нужен бот который будет отправлять приглашение в группу или страницуМожет кто подскажет исходники где искать

 318