2. コンピュータテクノロジー
  3. html - 目を左から右に動かす代替CSSアニメーション

html - 目を左から右に動かす代替CSSアニメーション

okwaves2024-01-25  8

* {
  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="https://stackoverflow.com/questions/63723030/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

それはすでに行われていませんか?

– ロコ C. ブルジャン

2020 年 9 月 3 日 11:51

@keyframes サンアイ { 0%{} 50%{} 75%{} 100%{} }

– ジェシカ ブルドッグ

2020 年 9 月 3 日 11:51

1

左側の位置で 2 番目のブロックの目を作成して、表示なし / ブロック アニメーションを表示して遊んでみてはいかがでしょうか?

– マキシギ

2020 年 9 月 3 日 12:14

1

@MaxiGui 良いアイデアですね...試してみます

– メガ・アガルワル

2020 年 9 月 3 日 12:44

1

codepen.io/knudsem/pen/OJyNwwM 数週間前に似たようなものを作成しました。眼球のドットを選択し、キーフレームを移動して移動するだけです。

– マチ

2020 年 9 月 3 日 19:03



------------------------

複雑な 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="https://stackoverflow.com/questions/63723030/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>

0



------------------------

ちょっとした 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="https://stackoverflow.com/questions/63723030/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>

4

なぜアニメーションが始まるのかすぐにではなく、数分待つのですか？それを修正できません

– メガ・アガルワル

2020 年 9 月 3 日 13:37

数分間待つ必要はありませんが、約 7 秒かかります。コードを変更しましたか?

– ラモン・ド・フリース

2020 年 9 月 3 日 13:42

はい、プリローダーとして使いたいので、数秒も待たないようにめちゃくちゃにしています

– メガ・アガルワル

2020 年 9 月 3 日 13:59

プロセスが 7 秒ごとに繰り返される部分はわかりますが、ページが読み込まれるとすぐに再生されるようにしたいのです。

– メガ・アガルワル

2020 年 9 月 3 日 14:00

新着記事:
bash - 1 つのファイル内の列をシェル スクリプト変数に置き換え、awk ステートメントで列の一部である二重引用符を保持する方法Python – 文字列に数字が含まれているかどうかをチェックするエラーチェッカーを作成しようとしていますが、うまくいきませんPython - gensim を使用したトピックモデリングPython - numpy配列のn番目とm番目の要素を取得するPython -FixedFormatter_shoul_only_be_used_together_with_FixedLocator: matplotlib でこの警告に対処する方法は?Excel - セルに単語が含まれている場合に VBA を非区別にするphp - データベース内の選択された値がすべて同じかどうかを確認する3d - R の Plot3D (rgl) で点を結合する方法numpy - 要素間の特定の一致に基づいて配列行を削除するazure - スプリント トラッキング ボードでバグを確認するhtml - mdbootstrap のシンプルなランディング ページがスマートフォンで上部と下部が切り詰められるのはなぜですかC++ - C++20 ビューを関数に渡す方法
総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves（オールアバウト）。その道のプロ（専門家）が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。

カテゴリ一覧