本文へスキップ

CRG-17 — HERO MOTION

ヒーロー演出・動く背景22点 在庫あり

LPの冒頭に貼るだけで動き出す、JSなしのモーション背景と演出。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-17-001

NIGHT SHIFT

オーロラヒーローAurora Hero

.cg-hr-aurora {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #0E1220;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-aurora::before,
.cg-hr-aurora::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .7;
}
.cg-hr-aurora::before {
  background: #2BB3A0;
  top: -80px;
  left: -30px;
  animation: cg-hr-aurora-a 7s ease-in-out infinite alternate;
}
.cg-hr-aurora::after {
  background: #4C5FD5;
  bottom: -100px;
  right: -40px;
  animation: cg-hr-aurora-a 9s ease-in-out infinite alternate-reverse;
}
.cg-hr-aurora p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #EAF2FF;
}
@keyframes cg-hr-aurora-a {
  to { transform: translate(40px, 24px) scale(1.25) rotate(20deg); }
}
<section class="cg-hr-aurora"><p>NIGHT SHIFT</p></section>
GROSS WT. 983 B ORIGINAL
CRG-17-002

PARTICLES

浮遊パーティクルRising Particles

.cg-hr-parts {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #14130F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-parts p {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #F2B707;
}
.cg-hr-parts i {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(242, 183, 7, .8);
  animation: cg-hr-parts-rise 5s linear infinite;
}
.cg-hr-parts i:nth-child(1) { left: 12%; animation-duration: 4.2s; }
.cg-hr-parts i:nth-child(2) { left: 30%; width: 4px; height: 4px; animation-delay: 1.2s; }
.cg-hr-parts i:nth-child(3) { left: 48%; animation-delay: 2.4s; animation-duration: 6s; }
.cg-hr-parts i:nth-child(4) { left: 64%; width: 3px; height: 3px; animation-delay: .6s; }
.cg-hr-parts i:nth-child(5) { left: 78%; animation-delay: 3s; animation-duration: 4.6s; }
.cg-hr-parts i:nth-child(6) { left: 90%; width: 4px; height: 4px; animation-delay: 1.8s; }
@keyframes cg-hr-parts-rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  90% { opacity: .9; }
  100% { transform: translateY(-160px); opacity: 0; }
}
<section class="cg-hr-parts"><i></i><i></i><i></i><i></i><i></i><i></i><p>PARTICLES</p></section>
GROSS WT. 1310 B ORIGINAL
CRG-17-003

ON STAGE

スポットライトスイープSpotlight Sweep

.cg-hr-spot {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #100F0C;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-spot::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle 90px at 50% 50%, rgba(255, 234, 180, .3), transparent 70%);
  animation: cg-hr-spot-move 5.5s ease-in-out infinite alternate;
}
.cg-hr-spot p {
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .24em;
  color: #FBF6EC;
}
@keyframes cg-hr-spot-move {
  0% { transform: translate(-14%, -8%); }
  100% { transform: translate(14%, 8%); }
}
<section class="cg-hr-spot"><p>ON STAGE</p></section>
GROSS WT. 745 B ORIGINAL
CRG-17-004

FLUID

流体ブロブ背景Liquid Blob

.cg-hr-blob {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #FDF4EC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-blob::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  background: linear-gradient(135deg, #E8590C, #C2426B);
  opacity: .85;
  animation: cg-hr-blob-morph 7s ease-in-out infinite;
}
.cg-hr-blob p {
  position: relative;
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #fff;
  mix-blend-mode: overlay;
}
@keyframes cg-hr-blob-morph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; transform: rotate(0deg) scale(1); }
  33% { border-radius: 45% 55% 42% 58% / 55% 45% 58% 42%; transform: rotate(30deg) scale(1.08); }
  66% { border-radius: 52% 48% 60% 40% / 40% 52% 48% 60%; transform: rotate(-15deg) scale(.96); }
}
<section class="cg-hr-blob"><p>FLUID</p></section>
GROSS WT. 960 B ORIGINAL
CRG-17-005
PRODUCT¥12,800

3D風フロートカード3D Float Card

.cg-hr-tilt {
  width: 280px;
  height: 150px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1C2340, #0E1220);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
  overflow: hidden;
}
.cg-hr-tilt .card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 34px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, #4C5FD5, #7C4FC8);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .45);
  animation: cg-hr-tilt-sway 5s ease-in-out infinite;
  transform-style: preserve-3d;
}
.cg-hr-tilt b { font-size: 15px; letter-spacing: .18em; }
.cg-hr-tilt span { font-size: 12px; opacity: .8; }
@keyframes cg-hr-tilt-sway {
  0%, 100% { transform: rotateX(8deg) rotateY(-12deg) translateY(0); }
  50% { transform: rotateX(-6deg) rotateY(12deg) translateY(-8px); }
}
<section class="cg-hr-tilt"><div class="card"><b>PRODUCT</b><span>¥12,800</span></div></section>
GROSS WT. 940 B ORIGINAL
CRG-17-006

SYSTEM ONLINE

CRTスキャンラインヒーローCRT Scanlines

.cg-hr-crt {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #06110B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0, 0, 0, .35) 2px 4px
  );
  pointer-events: none;
}
.cg-hr-crt p {
  position: relative;
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #4AE383;
  text-shadow: 0 0 8px rgba(74, 227, 131, .8);
  animation: cg-hr-crt-flicker 3.2s linear infinite;
}
@keyframes cg-hr-crt-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .5; transform: translateX(1px); }
  96% { opacity: .9; transform: translateX(-1px); }
}
<section class="cg-hr-crt"><p data-text="SYSTEM ONLINE">SYSTEM ONLINE</p></section>
GROSS WT. 935 B ORIGINAL
CRG-17-007

AI POWERED

発光オーブGlowing Orb

.cg-hr-orb {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #0C0A14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cg-hr-orb i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #B9C6FF, #4C5FD5 55%, #22194A);
  box-shadow:
    0 0 24px rgba(76, 95, 213, .9),
    0 0 70px rgba(76, 95, 213, .5);
  animation: cg-hr-orb-breathe 3.4s ease-in-out infinite;
}
.cg-hr-orb p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  color: #B9C6FF;
}
@keyframes cg-hr-orb-breathe {
  50% { transform: scale(1.12); box-shadow: 0 0 34px rgba(76, 95, 213, 1), 0 0 100px rgba(76, 95, 213, .65); }
}
<section class="cg-hr-orb"><i></i><p>AI POWERED</p></section>
GROSS WT. 853 B ORIGINAL
CRG-17-008

Studio Vision

巨大アウトライン文字マーキーOutline Marquee

.cg-hr-marq {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #EFEDE6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-marq .row {
  position: absolute;
  display: flex;
  width: max-content;
  animation: cg-hr-marq-run 8s linear infinite;
}
.cg-hr-marq .row span {
  font-size: 74px;
  font-weight: 900;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px #D5D0C2;
}
.cg-hr-marq p {
  position: relative;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: #1B1A17;
}
@keyframes cg-hr-marq-run {
  to { transform: translateX(-50%); }
}
<section class="cg-hr-marq"><div class="row" aria-hidden="true"><span>CREATIVE&nbsp;</span><span>CREATIVE&nbsp;</span></div><p>Studio Vision</p></section>
GROSS WT. 811 B ORIGINAL
CRG-17-009

RETRO WAVE

レトロ地平線グリッドRetro Horizon Grid

.cg-hr-horizon {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #1A0F2E 0 55%, #3B1D5E 55%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-horizon i {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 55%;
  bottom: -30%;
  background-image:
    linear-gradient(rgba(232, 89, 172, .5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(232, 89, 172, .5) 2px, transparent 2px);
  background-size: 100% 24px, 44px 100%;
  transform: perspective(180px) rotateX(58deg);
  transform-origin: top;
  animation: cg-hr-horizon-run 1.6s linear infinite;
}
.cg-hr-horizon p {
  position: relative;
  margin: 0 0 34px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #FF8ADB;
  text-shadow: 0 0 14px rgba(255, 138, 219, .8);
}
@keyframes cg-hr-horizon-run {
  to { background-position: 0 24px, 0 0; }
}
<section class="cg-hr-horizon"><i></i><p>RETRO WAVE</p></section>
GROSS WT. 1010 B ORIGINAL
CRG-17-010

SILENT FOREST

霧ドリフト背景Fog Drift

.cg-hr-fog {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #22302B, #101A16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-fog::before,
.cg-hr-fog::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: radial-gradient(ellipse 45% 38% at 30% 60%, rgba(233, 231, 224, .16), transparent 70%);
  animation: cg-hr-fog-move 11s ease-in-out infinite alternate;
}
.cg-hr-fog::after {
  background: radial-gradient(ellipse 40% 32% at 70% 40%, rgba(233, 231, 224, .12), transparent 70%);
  animation-duration: 14s;
  animation-direction: alternate-reverse;
}
.cg-hr-fog p {
  position: relative;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .38em;
  color: #DCE5DF;
}
@keyframes cg-hr-fog-move {
  to { transform: translateX(16%); }
}
<section class="cg-hr-fog"><p>SILENT FOREST</p></section>
GROSS WT. 952 B ORIGINAL
CRG-17-011

PLAYGROUND

幾何図形フロートFloating Shapes

.cg-hr-shapes {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #FBF3E4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-shapes i { position: absolute; }
.cg-hr-shapes .s1 {
  top: 18px;
  left: 26px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E8590C;
  transform: rotate(12deg);
  animation: cg-hr-shapes-f 4.5s ease-in-out infinite;
}
.cg-hr-shapes .s2 {
  right: 34px;
  top: 30px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3A9BD5;
  animation: cg-hr-shapes-f 5.4s ease-in-out infinite .8s;
}
.cg-hr-shapes .s3 {
  bottom: 22px;
  right: 74px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-bottom: 26px solid #F2B707;
  animation: cg-hr-shapes-f 5s ease-in-out infinite .4s;
}
.cg-hr-shapes p {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #1B1A17;
}
@keyframes cg-hr-shapes-f {
  50% { transform: translateY(-12px) rotate(-6deg); }
}
<section class="cg-hr-shapes"><i class="s1"></i><i class="s2"></i><i class="s3"></i><p>PLAYGROUND</p></section>
GROSS WT. 1155 B ORIGINAL
CRG-17-012

LAUNCH

回転ライトビームRotating Beam

.cg-hr-beam {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #171126;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-beam::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: conic-gradient(
    from 0deg,
    transparent 0 40deg,
    rgba(124, 79, 200, .35) 55deg,
    transparent 70deg 180deg,
    rgba(232, 89, 12, .3) 200deg,
    transparent 215deg
  );
  animation: cg-hr-beam-spin 8s linear infinite;
}
.cg-hr-beam p {
  position: relative;
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #F5F1FF;
}
@keyframes cg-hr-beam-spin {
  to { transform: rotate(360deg); }
}
<section class="cg-hr-beam"><p>LAUNCH</p></section>
GROSS WT. 795 B ORIGINAL
CRG-17-013

BUILD FASTER

コピペで、今日から。

動くグラデタイトルヒーローAnimated Gradient Title

.cg-hr-gtitle {
  width: 280px;
  height: 150px;
  border-radius: 14px;
  background: #FBF7F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cg-hr-gtitle p {
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(100deg, #E8590C, #C2426B, #3A5A78, #E8590C);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-hr-gtitle-flow 4.5s linear infinite;
}
.cg-hr-gtitle span {
  font-size: 11.5px;
  font-weight: 700;
  color: #8B857A;
  letter-spacing: .16em;
}
@keyframes cg-hr-gtitle-flow {
  to { background-position: 260% center; }
}
<section class="cg-hr-gtitle"><p>BUILD FASTER</p><span>コピペで、今日から。</span></section>
GROSS WT. 821 B ORIGINAL
CRG-17-014

MOTION

斜めパネルスライドDiagonal Panels

.cg-hr-diag {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #1B1A17;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-diag i {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 0 42%, rgba(232, 89, 12, .85) 42% 58%, transparent 58%);
  animation: cg-hr-diag-slide 4.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
.cg-hr-diag i:last-of-type {
  background: linear-gradient(115deg, transparent 0 46%, rgba(242, 183, 7, .7) 46% 54%, transparent 54%);
  animation-delay: .4s;
}
.cg-hr-diag p {
  position: relative;
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #FBF6EC;
}
@keyframes cg-hr-diag-slide {
  0% { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}
<section class="cg-hr-diag"><i></i><i></i><p>MOTION</p></section>
GROSS WT. 911 B ORIGINAL
CRG-17-015

SPARKLING

泡が昇るヒーローRising Bubbles

.cg-hr-bubbles {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #3A9BD5, #1E5378);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-bubbles p {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #EAF6FF;
}
.cg-hr-bubbles i {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .45);
  animation: cg-hr-bubbles-up 6s ease-in infinite;
}
.cg-hr-bubbles i:nth-child(1) { left: 14%; width: 26px; height: 26px; }
.cg-hr-bubbles i:nth-child(2) { left: 38%; width: 14px; height: 14px; animation-delay: 1.6s; }
.cg-hr-bubbles i:nth-child(3) { left: 64%; width: 34px; height: 34px; animation-delay: 3s; }
.cg-hr-bubbles i:nth-child(4) { left: 84%; width: 18px; height: 18px; animation-delay: 4.4s; }
@keyframes cg-hr-bubbles-up {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-100px) translateX(-8px); }
  100% { transform: translateY(-210px) translateX(8px); opacity: 0; }
}
<section class="cg-hr-bubbles"><i></i><i></i><i></i><i></i><p>SPARKLING</p></section>
GROSS WT. 1260 B ORIGINAL
CRG-17-016

GOOD MORNING

日の出ループSunrise Loop

.cg-hr-sun {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #FDEBD2 0 66%, #E8B27D 66%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cg-hr-sun i {
  position: absolute;
  left: 50%;
  bottom: 34%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFD98A, #F2953F);
  box-shadow: 0 0 30px rgba(242, 149, 63, .65);
  animation: cg-hr-sun-rise 7s ease-in-out infinite;
}
.cg-hr-sun b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34%;
  height: 1px;
  background: rgba(120, 70, 30, .3);
}
.cg-hr-sun p {
  position: relative;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #7A4A1E;
}
@keyframes cg-hr-sun-rise {
  0%, 100% { transform: translateY(44px); opacity: .6; }
  45%, 65% { transform: translateY(0); opacity: 1; }
}
<section class="cg-hr-sun"><i></i><b></b><p>GOOD MORNING</p></section>
GROSS WT. 1038 B ORIGINAL
CRG-17-017

OCEAN

揺れる波レイヤーLayered Waves

.cg-hr-waves {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #EAF6FF, #BBDCF5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-waves p {
  margin: 0 0 30px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .32em;
  color: #1E5378;
}
.cg-hr-waves i,
.cg-hr-waves b {
  position: absolute;
  bottom: -14px;
  left: -50%;
  right: -50%;
  height: 56px;
  border-radius: 45% 55% 0 0 / 100% 100% 0 0;
  background: rgba(58, 155, 213, .55);
  animation: cg-hr-waves-sway 4s ease-in-out infinite alternate;
}
.cg-hr-waves b {
  bottom: -26px;
  background: #1E5378;
  animation-duration: 5.2s;
  animation-direction: alternate-reverse;
}
@keyframes cg-hr-waves-sway {
  to { transform: translateX(36px); }
}
<section class="cg-hr-waves"><p>OCEAN</p><i></i><b></b></section>
GROSS WT. 892 B ORIGINAL
CRG-17-018

MAKE A WISH

流れ星の夜空Comet Night

.cg-hr-comet {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #0B1026, #1A2342);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-comet p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .32em;
  color: #C7D3F5;
}
.cg-hr-comet i,
.cg-hr-comet b {
  position: absolute;
  top: 16px;
  left: -80px;
  width: 80px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  transform: rotate(16deg);
  animation: cg-hr-comet-fly 4.5s ease-in infinite;
}
.cg-hr-comet b {
  top: 52px;
  width: 54px;
  animation-delay: 2.2s;
  opacity: .7;
}
@keyframes cg-hr-comet-fly {
  0%, 55% { transform: translateX(0) translateY(0) rotate(16deg); opacity: 0; }
  60% { opacity: 1; }
  78%, 100% { transform: translateX(400px) translateY(110px) rotate(16deg); opacity: 0; }
}
<section class="cg-hr-comet"><i></i><b></b><p>MAKE A WISH</p></section>
GROSS WT. 1007 B ORIGINAL
CRG-17-019

CONNECT

波紋リングヒーローPulse Rings

.cg-hr-rings {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #10141F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-rings p {
  position: relative;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #EAF2FF;
}
.cg-hr-rings i {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(76, 95, 213, .8);
  animation: cg-hr-rings-out 3s ease-out infinite;
}
.cg-hr-rings i:nth-child(2) { animation-delay: 1s; }
.cg-hr-rings i:nth-child(3) { animation-delay: 2s; }
@keyframes cg-hr-rings-out {
  0% { transform: scale(.5); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
<section class="cg-hr-rings"><i></i><i></i><i></i><p>CONNECT</p></section>
GROSS WT. 825 B ORIGINAL
CRG-17-020

OPENING

交差する2色イントロCrossing Colors

.cg-hr-cross {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #EFEDE6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-hr-cross p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .26em;
  color: #1B1A17;
  mix-blend-mode: darken;
}
.cg-hr-cross i,
.cg-hr-cross b {
  position: absolute;
  inset: 0;
  background: #E8590C;
  transform: translateX(-101%);
  animation: cg-hr-cross-wipe 4s cubic-bezier(.7, 0, .3, 1) infinite;
  opacity: .9;
}
.cg-hr-cross b {
  background: #F2B707;
  animation-delay: .25s;
}
@keyframes cg-hr-cross-wipe {
  0% { transform: translateX(-101%); }
  38%, 55% { transform: translateX(0); }
  93%, 100% { transform: translateX(101%); }
}
<section class="cg-hr-cross"><i></i><b></b><p>OPENING</p></section>
GROSS WT. 880 B ORIGINAL
CRG-17-021

作業員がフォームを搬入Porter Delivers Form

.cg-hr-porter {
  position: relative;
  width: 300px;
  height: 190px;
  border-radius: 12px;
  background: #40C46F;
  overflow: hidden;
  animation: cg-hr-porter-fade 7s ease infinite;
}
.cg-hr-porter::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 16px;
  background: rgba(0, 0, 0, .1);
}
/* 搬入されるフォームカード */
.cg-hr-porter .card {
  position: absolute;
  left: 116px;
  top: 22px;
  width: 152px;
  height: 132px;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(27, 26, 23, .18);
  padding: 12px;
  box-sizing: border-box;
  animation: cg-hr-porter-cardin 7s cubic-bezier(.3, .6, .4, 1) infinite;
}
.cg-hr-porter .card b { display: block; font-size: 12px; font-weight: 900; color: #1E6B3A; margin-bottom: 9px; font-family: sans-serif; }
.cg-hr-porter .card .in {
  display: block;
  height: 15px;
  border-radius: 5px;
  background: #F2F5F1;
  border: 1.5px solid #D6DED7;
  margin-bottom: 8px;
}
.cg-hr-porter .card .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 5px;
  background: #1E6B3A;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  font-family: sans-serif;
  animation: cg-hr-porter-btn 7s ease infinite;
}
/* CSSだけで描いた作業員(押して搬入→カードにもたれる) */
.cg-hr-porter .man {
  position: absolute;
  left: 66px;
  bottom: 24px;
  width: 36px;
  height: 66px;
  transform-origin: 50% 100%;
  animation: cg-hr-porter-manin 7s cubic-bezier(.3, .6, .4, 1) infinite;
}
.cg-hr-porter .head { position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #C89B6C; }
.cg-hr-porter .cap { position: absolute; right: 1px; top: -1px; width: 17px; height: 7px; border-radius: 5px 5px 0 0; background: #3A5A78; }
.cg-hr-porter .cap::after { content: ""; position: absolute; right: -5px; bottom: 0; width: 7px; height: 3px; border-radius: 2px; background: #3A5A78; }
.cg-hr-porter .torso {
  position: absolute;
  right: 2px;
  top: 17px;
  width: 17px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(#E8590C 42%, #F2B707 42% 58%, #E8590C 58%);
}
.cg-hr-porter .arm {
  position: absolute;
  right: -11px;
  top: 21px;
  width: 17px;
  height: 5px;
  border-radius: 3px;
  background: #C89B6C;
  transform-origin: 2px 50%;
  animation: cg-hr-porter-arm 7s ease infinite;
}
.cg-hr-porter .legf, .cg-hr-porter .legb {
  position: absolute;
  top: 40px;
  width: 5px;
  height: 26px;
  border-radius: 3px;
  background: #1B1A17;
  transform-origin: 50% 2px;
}
.cg-hr-porter .legf { right: 4px; animation: cg-hr-porter-legf 7s linear infinite; }
.cg-hr-porter .legb { right: 11px; animation: cg-hr-porter-legb 7s linear infinite; }
.cg-hr-porter .dust {
  position: absolute;
  bottom: 34px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  opacity: 0;
}
.cg-hr-porter .d1 { left: 34px; animation: cg-hr-porter-dust 7s ease infinite; }
.cg-hr-porter .d2 { left: 84px; animation: cg-hr-porter-dust 7s ease .8s infinite; }
/* 0-38% 押して搬入 / 41% 手を離した反動 / 以降は隣でひと休み */
@keyframes cg-hr-porter-cardin {
  0% { transform: translateX(-300px); }
  38% { transform: translateX(0); }
  41% { transform: translateX(5px) rotate(.6deg); }
  45%, 100% { transform: translateX(0) rotate(0); }
}
@keyframes cg-hr-porter-manin {
  0% { transform: translateX(-300px) rotate(9deg); }
  38% { transform: translateX(0) rotate(9deg); }
  46%, 100% { transform: translateX(0) rotate(0); }
}
@keyframes cg-hr-porter-arm {
  0%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(30deg); }
}
@keyframes cg-hr-porter-legf {
  0% { transform: rotate(24deg); }
  5% { transform: rotate(-24deg); }
  10% { transform: rotate(24deg); }
  15% { transform: rotate(-24deg); }
  20% { transform: rotate(24deg); }
  25% { transform: rotate(-24deg); }
  30% { transform: rotate(24deg); }
  35% { transform: rotate(-18deg); }
  40%, 100% { transform: rotate(0); }
}
@keyframes cg-hr-porter-legb {
  0% { transform: rotate(-24deg); }
  5% { transform: rotate(24deg); }
  10% { transform: rotate(-24deg); }
  15% { transform: rotate(24deg); }
  20% { transform: rotate(-24deg); }
  25% { transform: rotate(24deg); }
  30% { transform: rotate(-24deg); }
  35% { transform: rotate(18deg); }
  40%, 100% { transform: rotate(0); }
}
@keyframes cg-hr-porter-dust {
  0%, 8% { opacity: 0; transform: scale(.5); }
  14% { opacity: 1; }
  26% { opacity: 0; transform: scale(1.4) translateX(-8px); }
  100% { opacity: 0; }
}
@keyframes cg-hr-porter-btn {
  0%, 52% { transform: scale(1); }
  58% { transform: scale(1.08); }
  64% { transform: scale(1); }
  70% { transform: scale(1.08); }
  76%, 100% { transform: scale(1); }
}
@keyframes cg-hr-porter-fade {
  0%, 93% { opacity: 1; }
  100% { opacity: 0; }
}
<div class="cg-hr-porter" aria-hidden="true"><i class="dust d1"></i><i class="dust d2"></i><div class="card"><b>Register Now</b><i class="in"></i><i class="in"></i><span class="btn">NEXT</span></div><div class="man"><i class="cap"></i><i class="head"></i><i class="torso"></i><i class="arm"></i><i class="legf"></i><i class="legb"></i></div></div>
GROSS WT. 5292 B ORIGINAL
CRG-17-022

フォークリフトが納品Forklift Delivery

.cg-hr-lift {
  position: relative;
  width: 300px;
  height: 190px;
  border-radius: 12px;
  background: #F1ECE0;
  overflow: hidden;
  animation: cg-hr-lift-fade 7s ease infinite;
}
.cg-hr-lift::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 12px;
  background: repeating-linear-gradient(-45deg, #F2B707 0 12px, #1B1A17 12px 24px);
  opacity: .85;
}
/* 納品される貨物カード(降ろされた後にIN STOCKスタンプ) */
.cg-hr-lift .cargo {
  position: absolute;
  left: 58px;
  bottom: 20px;
  width: 70px;
  height: 58px;
  background: #C89B6C;
  border: 2px solid #1B1A17;
  border-radius: 6px;
  box-sizing: border-box;
  animation: cg-hr-lift-cargo 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .cargo .tape { position: absolute; left: -2px; right: -2px; top: 8px; height: 7px; background: repeating-linear-gradient(-45deg, #F2B707 0 7px, #1B1A17 7px 14px); }
.cg-hr-lift .cargo b {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 22px;
  background: #fff;
  border: 1.5px solid #1B1A17;
  font-family: monospace;
  font-size: 7.5px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  color: #1B1A17;
}
.cg-hr-lift .cargo .bars {
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 34px;
  height: 9px;
  background: repeating-linear-gradient(90deg, #1B1A17 0 2px, transparent 2px 5px, #1B1A17 5px 6px, transparent 6px 9px);
}
.cg-hr-lift .cargo::after {
  content: "IN STOCK";
  position: absolute;
  right: -14px;
  top: -12px;
  font-family: monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #2F8A59;
  border: 2px solid #2F8A59;
  border-radius: 3px;
  padding: 2px 5px;
  background: rgba(255, 255, 255, .85);
  transform: rotate(-10deg) scale(0);
  animation: cg-hr-lift-stamp 7s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* CSSだけで描いたフォークリフト(進入→荷降ろし→バック退場) */
.cg-hr-lift .truck {
  position: absolute;
  left: 132px;
  bottom: 18px;
  width: 104px;
  height: 84px;
  animation: cg-hr-lift-truck 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .mast { position: absolute; left: 12px; bottom: 4px; width: 6px; height: 72px; border-radius: 3px; background: #1B1A17; }
.cg-hr-lift .fork {
  position: absolute;
  left: -46px;
  bottom: 6px;
  width: 58px;
  height: 6px;
  border-radius: 3px;
  background: #5A5650;
  animation: cg-hr-lift-fork 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .cab {
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 66px;
  height: 34px;
  border-radius: 8px 12px 6px 6px;
  background: #E8590C;
  border: 2px solid #1B1A17;
  box-sizing: border-box;
}
.cg-hr-lift .roof {
  position: absolute;
  left: 30px;
  bottom: 42px;
  width: 42px;
  height: 32px;
  border: 3px solid #1B1A17;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}
.cg-hr-lift .lamp {
  position: absolute;
  left: 44px;
  bottom: 76px;
  width: 10px;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: #F2B707;
  animation: cg-hr-lift-lamp 7s step-end infinite;
}
.cg-hr-lift .w {
  position: absolute;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1B1A17;
  animation: cg-hr-lift-wheel 7s cubic-bezier(.35, .6, .45, 1) infinite;
}
.cg-hr-lift .w::after { content: ""; position: absolute; left: 8px; top: 2px; width: 4px; height: 7px; border-radius: 2px; background: #E9E7E0; }
.cg-hr-lift .wf { left: 22px; }
.cg-hr-lift .wb { left: 62px; }
/* 貨物: 入場はフォーク上(浮いた状態)→40-52%で接地→そのまま残る */
@keyframes cg-hr-lift-cargo {
  0% { transform: translate(240px, -22px); }
  34% { transform: translate(0, -22px); }
  40% { transform: translate(0, -22px); }
  52% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes cg-hr-lift-truck {
  0% { transform: translateX(240px); }
  34% { transform: translateX(0); }
  62% { transform: translateX(0); }
  88%, 100% { transform: translateX(250px); }
}
@keyframes cg-hr-lift-fork {
  0%, 40% { transform: translateY(-22px); }
  52%, 100% { transform: translateY(0); }
}
@keyframes cg-hr-lift-wheel {
  0% { transform: rotate(0); }
  34% { transform: rotate(-2.5turn); }
  62% { transform: rotate(-2.5turn); }
  88%, 100% { transform: rotate(0); }
}
@keyframes cg-hr-lift-lamp {
  0%, 8%, 16%, 24%, 32% { background: #F2B707; }
  4%, 12%, 20%, 28% { background: #C0392B; }
  36%, 60% { background: #F2B707; }
  64%, 72%, 80% { background: #C0392B; }
  68%, 76%, 84%, 100% { background: #F2B707; }
}
@keyframes cg-hr-lift-stamp {
  0%, 56% { transform: rotate(-10deg) scale(0); }
  63% { transform: rotate(-10deg) scale(1.15); }
  67%, 100% { transform: rotate(-10deg) scale(1); }
}
@keyframes cg-hr-lift-fade {
  0%, 93% { opacity: 1; }
  100% { opacity: 0; }
}
<div class="cg-hr-lift" aria-hidden="true"><div class="cargo"><i class="tape"></i><b>CSS CARGO</b><i class="bars"></i></div><div class="truck"><i class="mast"></i><i class="fork"></i><i class="cab"></i><i class="roof"></i><i class="lamp"></i><i class="w wf"></i><i class="w wb"></i></div></div>
GROSS WT. 5149 B ORIGINAL