Блог

Главная - Вопросы по программированию - CSS анимация для перемещения глаз слева направо альтернатива

CSS анимация для перемещения глаз слева направо альтернатива

#html #css #css-animations #css-transitions #css-transforms

#HTML #css #css-анимации #css-переходы #css-преобразования

Вопрос:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}

#eyes {
  animation: sun-eyes 2s ease infinite;
  transform-origin: center;
  animation-direction: alternate;
}

@keyframes sun-eyes {
  from {
    -webkit-transform: translate(100px, 0)
  }
  to {
    -webkit-transform: translate(-350px, 0)
  }
}  
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <svg width="20%" height="70vh" viewBox="0 0 1274 754" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="sunfigma 1">
      <g id="sunbody">
        <path id="Vector" d="M62.4028 749.792H1274" stroke="black" stroke-miterlimit="10" />
        <path id="Vector_2"
          d="M656.983 237.831C646.606 237.831 636.313 238.251 626.132 239.009C623.327 239.233 620.523 239.486 617.718 239.766C559.204 245.604 502.707 264.321 452.278 294.575C401.85 324.828 358.739 365.869 326.039 414.754C293.339 463.639 271.859 519.156 263.14 577.323C254.422 635.491 258.68 694.867 275.61 751.195H1038.47C1056.36 691.685 1060.08 628.816 1049.36 567.608C1038.63 506.399 1013.74 448.548 976.686 398.672C939.628 348.796 891.425 308.277 835.925 280.35C780.425 252.423 719.166 237.863 657.039 237.831H656.983Z"
          fill="url(#paint0_linear)" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_3" d="M235.42 101.915L370.491 246.976" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_4" d="M764.568 178.415L825.569 0.925781" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_5" d="M1094.08 389.624L1235.74 294.188" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_6" d="M1140.67 730.857L1251.28 739.3" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_7" d="M0.701172 558.95L164.744 601.253" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
      </g>
      <g id="eyes">
        <path id="Vector_8"
          d="M724.294 690.881C730.49 690.881 735.512 685.858 735.512 679.66C735.512 673.463 730.49 668.439 724.294 668.439C718.098 668.439 713.075 673.463 713.075 679.66C713.075 685.858 718.098 690.881 724.294 690.881Z"
          fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_9"
          d="M837.881 681.063C837.881 684.039 836.699 686.893 834.595 688.998C832.491 691.102 829.638 692.284 826.663 692.284C820.464 692.284 815.444 685.86 815.444 679.66C815.444 673.461 820.464 669.842 826.663 669.842C829.638 669.842 832.491 671.024 834.595 673.129C836.699 675.233 837.881 678.087 837.881 681.063Z"
          fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
      </g>
    </g>
    <defs>
      <linearGradient id="paint0_linear" x1="363" y1="-78" x2="863" y2="1098" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFDB00" />
        <stop offset="1" stop-color="#FFDB00" />
      </linearGradient>
    </defs>
  </svg>


</body>

</html>

Как я могу перемещать глазные яблоки непосредственно слева направо и справа налево альтернативно, не показывая движущийся переход глазных яблок и сохраняя положение достаточно правильным?

Я совершенно новичок в анимации CSS. Любая помощь будет оценена! Я добавил фрагмент кода настолько, насколько мог поэкспериментировать с ним.

Спасибо

Комментарии:

1. Разве это уже не так?

2. @ключевые кадры sun-eyes { 0%{} 50%{} 75%{} 100%{} }

3. Почему бы вам не попробовать создать второй блочный глаз с позицией слева и не поиграть с анимацией display none / display block?

4. @MaxiGui Выглядит как хорошая идея … попробую

5. codepen.io/knudsem/pen/OJyNwwM Я сделал нечто подобное несколько недель назад. Вам просто нужно выделить точки глазного яблока и переместить его с помощью ключевых кадров translate

Ответ №1:

Просто, как показано ниже, без сложного JS-кода:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}

#eyes {
  animation: sun-eyes 2s ease infinite;
  transform-origin: center;
  animation-direction: alternate;
}

@keyframes sun-eyes {
  0%,50% {
    transform: translate(100px, 0)
  }
  50.1%,100% {
    transform: translate(-350px, 0)
  }
}  
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <svg width="20%" height="70vh" viewBox="0 0 1274 754" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="sunfigma 1">
      <g id="sunbody">
        <path id="Vector" d="M62.4028 749.792H1274" stroke="black" stroke-miterlimit="10" />
        <path id="Vector_2"
          d="M656.983 237.831C646.606 237.831 636.313 238.251 626.132 239.009C623.327 239.233 620.523 239.486 617.718 239.766C559.204 245.604 502.707 264.321 452.278 294.575C401.85 324.828 358.739 365.869 326.039 414.754C293.339 463.639 271.859 519.156 263.14 577.323C254.422 635.491 258.68 694.867 275.61 751.195H1038.47C1056.36 691.685 1060.08 628.816 1049.36 567.608C1038.63 506.399 1013.74 448.548 976.686 398.672C939.628 348.796 891.425 308.277 835.925 280.35C780.425 252.423 719.166 237.863 657.039 237.831H656.983Z"
          fill="url(#paint0_linear)" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_3" d="M235.42 101.915L370.491 246.976" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_4" d="M764.568 178.415L825.569 0.925781" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_5" d="M1094.08 389.624L1235.74 294.188" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_6" d="M1140.67 730.857L1251.28 739.3" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_7" d="M0.701172 558.95L164.744 601.253" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
      </g>
      <g id="eyes">
        <path id="Vector_8"
          d="M724.294 690.881C730.49 690.881 735.512 685.858 735.512 679.66C735.512 673.463 730.49 668.439 724.294 668.439C718.098 668.439 713.075 673.463 713.075 679.66C713.075 685.858 718.098 690.881 724.294 690.881Z"
          fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_9"
          d="M837.881 681.063C837.881 684.039 836.699 686.893 834.595 688.998C832.491 691.102 829.638 692.284 826.663 692.284C820.464 692.284 815.444 685.86 815.444 679.66C815.444 673.461 820.464 669.842 826.663 669.842C829.638 669.842 832.491 671.024 834.595 673.129C836.699 675.233 837.881 678.087 837.881 681.063Z"
          fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
      </g>
    </g>
    <defs>
      <linearGradient id="paint0_linear" x1="363" y1="-78" x2="863" y2="1098" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFDB00" />
        <stop offset="1" stop-color="#FFDB00" />
      </linearGradient>
    </defs>
  </svg>


</body>

</html>

Ответ №2:

Я сделал это, используя немного javascipt / jquery, чтобы создать некоторые временные события, происходящие внутри цикла.

 let eyes = $("#eyes");
function LoopForever() {
setTimeout(function() { $(eyes).css('-webkit-transform', 'translate(-350px, 0)'); }, 1000);
setTimeout(function() { $(eyes).css('display', 'none'); }, 2000);
setTimeout(function() { $(eyes).css('display', 'block'); }, 2300);
setTimeout(function() { $(eyes).css('-webkit-transform', 'translate(100px, 0)'); }, 3300);
setTimeout(function() { $(eyes).css('display', 'none'); }, 4300);
setTimeout(function() { $(eyes).css('display', 'block'); }, 4500);
}
var interval = self.setInterval(function(){LoopForever()},7000);  
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <svg width="20%" height="70vh" viewBox="0 0 1274 754" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="sunfigma 1">
      <g id="sunbody">
        <path id="Vector" d="M62.4028 749.792H1274" stroke="black" stroke-miterlimit="10" />
        <path id="Vector_2"
          d="M656.983 237.831C646.606 237.831 636.313 238.251 626.132 239.009C623.327 239.233 620.523 239.486 617.718 239.766C559.204 245.604 502.707 264.321 452.278 294.575C401.85 324.828 358.739 365.869 326.039 414.754C293.339 463.639 271.859 519.156 263.14 577.323C254.422 635.491 258.68 694.867 275.61 751.195H1038.47C1056.36 691.685 1060.08 628.816 1049.36 567.608C1038.63 506.399 1013.74 448.548 976.686 398.672C939.628 348.796 891.425 308.277 835.925 280.35C780.425 252.423 719.166 237.863 657.039 237.831H656.983Z"
          fill="url(#paint0_linear)" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_3" d="M235.42 101.915L370.491 246.976" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_4" d="M764.568 178.415L825.569 0.925781" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_5" d="M1094.08 389.624L1235.74 294.188" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
        <path id="Vector_6" d="M1140.67 730.857L1251.28 739.3" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_7" d="M0.701172 558.95L164.744 601.253" stroke="black" stroke-width="2"
          stroke-miterlimit="10" />
      </g>
      <g id="eyes">
        <path id="Vector_8"
          d="M724.294 690.881C730.49 690.881 735.512 685.858 735.512 679.66C735.512 673.463 730.49 668.439 724.294 668.439C718.098 668.439 713.075 673.463 713.075 679.66C713.075 685.858 718.098 690.881 724.294 690.881Z"
          fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
        <path id="Vector_9"
          d="M837.881 681.063C837.881 684.039 836.699 686.893 834.595 688.998C832.491 691.102 829.638 692.284 826.663 692.284C820.464 692.284 815.444 685.86 815.444 679.66C815.444 673.461 820.464 669.842 826.663 669.842C829.638 669.842 832.491 671.024 834.595 673.129C836.699 675.233 837.881 678.087 837.881 681.063Z"
          fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
      </g>
    </g>
    <defs>
      <linearGradient id="paint0_linear" x1="363" y1="-78" x2="863" y2="1098" gradientUnits="userSpaceOnUse">
        <stop stop-color="#FFDB00" />
        <stop offset="1" stop-color="#FFDB00" />
      </linearGradient>
    </defs>
  </svg>


</body>

</html>

Комментарии:

1. почему анимация начинается после ожидания в течение нескольких минут, а не мгновенно? Невозможно исправить это

2. это должно занять не минуты, а около 7 секунд. вы изменили какой-либо код?

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

4. Я получаю ту часть, что процесс повторяется каждые 7 секунд, но я хочу, чтобы он воспроизводился сразу после загрузки страницы