Показать сообщение отдельно
  #7 (permalink)  
Старый 15.09.2017, 15:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Dilettante_Pro,
Задание: качели.
а вот такое сможешь, затухающая синусоида, можно задавать время и количество колебаний, что должно получится, пример ниже на css,пример отражает суть, а не точные параметры.
кому это по силам, напишите свой вариант.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  hr {
  width: 300px; height: 2px; background-color: #000080;
   margin-top: 200px;

  -webkit-animation: spin 5s ease-in-out;
  -moz-animation: spin 5s ease-in-out;
  -o-animation: spin 5s ease-in-out;
  animation: spin 5s ease-in-out;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@keyframes spin {
  0% {
      transform: rotateZ(50deg);
  }

  25% {
     transform: rotateZ(-40deg);

  }
  50%{
    transform: rotateZ(30deg);
  }
  75%{
    transform: rotateZ(-20deg);
  }

  100%{
    transform: rotateZ(0deg);
  }

}



  </style>

  <script>

  </script>
</head>

<body>
<label><input type="number" min="1" step="1" value="1"></label>
<input id="go" name="" type="button" value="go">
<hr style="width: 300px; height: 2px; background-color: #000080">
<script>
var maximumAngle = 50, duration = 5000;

</script>
</body>
</html>
Ответить с цитированием