Блог

Главная - Вопросы по программированию - Как я могу создать свою анимацию, чтобы она была отзывчивой?

Как я могу создать свою анимацию, чтобы она была отзывчивой?

#javascript #html #css

#javascript #HTML #css

Вопрос:

По сути, я пытаюсь анимировать преобразование, состоящее из 3 блоков. У меня есть анимация, которую я хочу, но по какой-то причине она не реагирует. Я попытался добавить медиа-запросы к ключевым кадрам, но когда я это сделал, анимация перестала работать. Как я могу исправить это, чтобы моя анимация придерживалась позиции независимо от размера окна, даже когда оно уменьшается? Буду признателен за любую помощь. Спасибо. Вот мой код.

 *{
  margin: 0;
  padding: 0;
}

body{
  background-color: cornflowerblue;
  text-align: center;
  overflow-x: hidden;
}

.showbox {
    float: left;
    margin: 4em 1em;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
    font-family: 'Lobster', cursive;
    
  }



.outer{
  position: relative;
  left: 30px;
  animation: example 4s infinite;
} 




@keyframes example {
  0%   {left:400px; top:0px;}
  50%  {left:800px; top:200px;}
  100% {left:400px; top:0px;}
} 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobsteramp;display=swap" rel="stylesheet">
  </head>
  <body>
    <br>
    <br>
    <div class = "outer">
<div class="showbox" style="transform: translate(3em,0);">Why</div>
<div class="showbox" style="transform: rotate(30deg); border-color: red;">Hello</div>
<div class="showbox" style="transform: translate(-3em,1em);">There</div>

    </div>

    <script src="script.js"></script>
  </body>
</html>

Ответ №1:

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

 @media (max-width: 600px) {
  .outer{
     width: 100%;
     position: relative;
     left: 30px;
     animation: sm-example 4s infinite;
  }
}

@keyframes sm-example {
  0%   {left:10%; top:0px;}
  50%  {left:20%; top:200px;}
  100% {left:10%; top:0px;}
}

Вы можете посмотреть образец здесь

Метки: