テロップ・登場エフェクトのCSSコピペパーツ 23選

CRG-19-001

ポンッ!

ポンッ!Pop In

.cg-tp-pon {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #E8590C;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .35);
  animation: cg-tp-pon-in 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite;
}
@keyframes cg-tp-pon-in {
  0% { transform: scale(0); opacity: 0; }
  10% { transform: scale(1.25); opacity: 1; }
  16%, 85% { transform: scale(1); }
  95%, 100% { transform: scale(0); opacity: 0; }
}

<p class="cg-tp-pon">ポンッ!</p>

GROSS WT. 499 B ORIGINAL

CRG-19-002

ポヨン♪

ポヨン♪Bouncy Drop

.cg-tp-poyon {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #E8557E;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  animation: cg-tp-poyon-in 3s ease infinite;
}
@keyframes cg-tp-poyon-in {
  0% { transform: translateY(-70px) scale(1, 1); opacity: 0; }
  10% { transform: translateY(0) scale(1.2, .75); opacity: 1; }
  16% { transform: translateY(-16px) scale(.92, 1.1); }
  22% { transform: translateY(0) scale(1.06, .94); }
  28%, 88% { transform: translateY(0) scale(1, 1); }
  96%, 100% { transform: translateY(0) scale(1, 1); opacity: 0; }
}

<p class="cg-tp-poyon">ポヨン♪</p>

GROSS WT. 664 B ORIGINAL

CRG-19-003

クルン☆

クルン☆Spin In

.cg-tp-kurun {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #F2952A;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  animation: cg-tp-kurun-in 3s cubic-bezier(.3, 1.3, .5, 1) infinite;
}
@keyframes cg-tp-kurun-in {
  0% { transform: rotate(-360deg) scale(0); opacity: 0; }
  14%, 86% { transform: rotate(0) scale(1); opacity: 1; }
  96%, 100% { transform: rotate(0) scale(0); opacity: 0; }
}

<p class="cg-tp-kurun">クルン☆</p>

GROSS WT. 508 B ORIGINAL

CRG-19-004

ドンッ!!

ドンッ!!Stamp Slam

.cg-tp-don {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 7px #C0392B;
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 rgba(27, 26, 23, .4);
  animation: cg-tp-don-in 2.8s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes cg-tp-don-in {
  0% { transform: scale(3.2); opacity: 0; }
  9% { transform: scale(1); opacity: 1; }
  12% { transform: scale(1) translate(2px, 1px); }
  15% { transform: scale(1) translate(-2px, -1px); }
  18%, 88% { transform: scale(1) translate(0, 0); }
  97%, 100% { transform: scale(1); opacity: 0; }
}

<p class="cg-tp-don">ドンッ!!</p>

GROSS WT. 615 B ORIGINAL

CRG-19-005

ズドーン!!!

ズドーン!!!Mega Impact

.cg-tp-zudon {
  position: relative;
  margin: 0;
  padding: 14px 10px;
}
.cg-tp-zudon span {
  display: inline-block;
  font-size: 38px;
  font-weight: 900;
  color: #FFE14D;
  -webkit-text-stroke: 7px #1B1A17;
  paint-order: stroke fill;
  text-shadow: 5px 6px 0 rgba(27, 26, 23, .5);
  animation: cg-tp-zudon-in 3.2s cubic-bezier(.8, 0, .2, 1) infinite;
}
.cg-tp-zudon::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 77, .8), transparent 65%);
  opacity: 0;
  animation: cg-tp-zudon-flash 3.2s linear infinite;
}
@keyframes cg-tp-zudon-in {
  0% { transform: scale(4.5) rotate(4deg); opacity: 0; }
  7% { transform: scale(1) rotate(-2deg); opacity: 1; }
  9% { transform: scale(1.06) rotate(1.5deg) translate(3px, 2px); }
  11% { transform: scale(.98) rotate(-1deg) translate(-3px, -2px); }
  13% { transform: scale(1.02) rotate(.5deg) translate(2px, 1px); }
  16%, 88% { transform: scale(1) rotate(0) translate(0, 0); }
  97%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes cg-tp-zudon-flash {
  0%, 5% { opacity: 0; }
  8% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

<p class="cg-tp-zudon"><span>ズドーン!!!</span></p>

GROSS WT. 1226 B ORIGINAL

CRG-19-006

プルンッ

プルンッJelly Wobble

.cg-tp-purun {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #2BB3A0;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  transform-origin: 50% 100%;
  animation: cg-tp-purun-in 3s ease infinite;
}
@keyframes cg-tp-purun-in {
  0% { transform: scale(0, 0); opacity: 0; }
  8% { transform: scale(1.25, .7); opacity: 1; }
  14% { transform: scale(.85, 1.2); }
  20% { transform: scale(1.12, .88); }
  26% { transform: scale(.96, 1.06); }
  32%, 88% { transform: scale(1, 1); }
  97%, 100% { transform: scale(1, 1); opacity: 0; }
}

<p class="cg-tp-purun">プルンッ</p>

GROSS WT. 640 B ORIGINAL

CRG-19-007

シュッ

左からシュッSwipe In Left

.cg-tp-shul {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #3A9BD5;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  animation: cg-tp-shul-in 2.8s cubic-bezier(.2, .9, .3, 1) infinite;
}
@keyframes cg-tp-shul-in {
  0% { transform: translateX(-140px); opacity: 0; filter: blur(8px); }
  12%, 88% { transform: translateX(0); opacity: 1; filter: blur(0); }
  96%, 100% { transform: translateX(0); opacity: 0; }
}

<p class="cg-tp-shul">シュッ</p>

GROSS WT. 522 B ORIGINAL

CRG-19-008

シュッ

右からシュッSwipe In Right

.cg-tp-shur {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #7A4FA0;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  animation: cg-tp-shur-in 2.8s cubic-bezier(.2, .9, .3, 1) infinite;
}
@keyframes cg-tp-shur-in {
  0% { transform: translateX(140px); opacity: 0; filter: blur(8px); }
  12%, 88% { transform: translateX(0); opacity: 1; filter: blur(0); }
  96%, 100% { transform: translateX(0); opacity: 0; }
}

<p class="cg-tp-shur">シュッ</p>

GROSS WT. 521 B ORIGINAL

CRG-19-009

シュバッ!

シュバッ!Speed Slash

.cg-tp-shuba {
  position: relative;
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #E8590C;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .35);
  animation: cg-tp-shuba-in 2.9s cubic-bezier(.1, .9, .2, 1) infinite;
}
.cg-tp-shuba i {
  position: absolute;
  top: 50%;
  left: -30px;
  right: -10px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(232, 89, 12, .8));
  transform: translateY(-50%);
  opacity: 0;
  animation: cg-tp-shuba-line 2.9s linear infinite;
}
@keyframes cg-tp-shuba-in {
  0% { transform: translateX(-160px) skewX(-24deg); opacity: 0; }
  9% { transform: translateX(6px) skewX(8deg); opacity: 1; }
  13%, 88% { transform: translateX(0) skewX(0); }
  96%, 100% { transform: translateX(0); opacity: 0; }
}
@keyframes cg-tp-shuba-line {
  0%, 2% { opacity: 0; transform: translateY(-50%) translateX(-40px); }
  7% { opacity: 1; }
  14%, 100% { opacity: 0; transform: translateY(-50%) translateX(30px); }
}

<p class="cg-tp-shuba"><i aria-hidden="true"></i>シュバッ!</p>

GROSS WT. 1084 B ORIGINAL

CRG-19-010

ふわっ

ふわっSoft Rise

.cg-tp-fuwa {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #C89B6C;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .25);
  animation: cg-tp-fuwa-in 3.4s ease-in-out infinite;
}
@keyframes cg-tp-fuwa-in {
  0% { transform: translateY(22px); opacity: 0; filter: blur(6px); }
  22%, 84% { transform: translateY(0); opacity: 1; filter: blur(0); }
  97%, 100% { transform: translateY(-10px); opacity: 0; filter: blur(4px); }
}

<p class="cg-tp-fuwa">ふわっ</p>

GROSS WT. 528 B ORIGINAL

CRG-19-011

ビヨヨーン

ビヨヨーンSpring Stretch

.cg-tp-biyo {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #7D8A3C;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  transform-origin: 50% 100%;
  animation: cg-tp-biyo-in 3.2s ease infinite;
}
@keyframes cg-tp-biyo-in {
  0% { transform: scaleY(.1); opacity: 0; }
  9% { transform: scaleY(1.55); opacity: 1; }
  16% { transform: scaleY(.72); }
  23% { transform: scaleY(1.24); }
  30% { transform: scaleY(.9); }
  37% { transform: scaleY(1.08); }
  44%, 88% { transform: scaleY(1); }
  97%, 100% { transform: scaleY(1); opacity: 0; }
}

<p class="cg-tp-biyo">ビヨヨーン</p>

GROSS WT. 654 B ORIGINAL

CRG-19-012

ピカッ!

ピカッ!Flash Reveal

.cg-tp-pika {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #FFE14D;
  -webkit-text-stroke: 6px #B8860B;
  paint-order: stroke fill;
  animation: cg-tp-pika-in 3s ease-in-out infinite;
}
@keyframes cg-tp-pika-in {
  0% { opacity: 0; filter: brightness(3); text-shadow: 0 0 30px rgba(255, 225, 77, 1), 0 0 60px rgba(255, 225, 77, .8); transform: scale(1.15); }
  10% { opacity: 1; filter: brightness(1.6); text-shadow: 0 0 18px rgba(255, 225, 77, .9); transform: scale(1); }
  30%, 86% { opacity: 1; filter: brightness(1); text-shadow: 3px 4px 0 rgba(27, 26, 23, .3); }
  96%, 100% { opacity: 0; filter: brightness(2); }
}

<p class="cg-tp-pika">ピカッ!</p>

GROSS WT. 672 B ORIGINAL

CRG-19-013

バーン!

バーン!Burst with Rays

.cg-tp-baan {
  position: relative;
  margin: 0;
  display: inline-block;
  padding: 16px;
}
.cg-tp-baan span {
  position: relative;
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 7px #D6336C;
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 rgba(27, 26, 23, .4);
  animation: cg-tp-baan-in 3s cubic-bezier(.2, 1.4, .4, 1) infinite;
}
.cg-tp-baan i {
  position: absolute;
  inset: -22px;
  background: conic-gradient(
    from 0deg,
    rgba(214, 51, 108, .55) 0 6deg, transparent 6deg 30deg,
    rgba(214, 51, 108, .55) 30deg 36deg, transparent 36deg 60deg,
    rgba(214, 51, 108, .55) 60deg 66deg, transparent 66deg 90deg,
    rgba(214, 51, 108, .55) 90deg 96deg, transparent 96deg 120deg,
    rgba(214, 51, 108, .55) 120deg 126deg, transparent 126deg 150deg,
    rgba(214, 51, 108, .55) 150deg 156deg, transparent 156deg 180deg,
    rgba(214, 51, 108, .55) 180deg 186deg, transparent 186deg 210deg,
    rgba(214, 51, 108, .55) 210deg 216deg, transparent 216deg 240deg,
    rgba(214, 51, 108, .55) 240deg 246deg, transparent 246deg 270deg,
    rgba(214, 51, 108, .55) 270deg 276deg, transparent 276deg 300deg,
    rgba(214, 51, 108, .55) 300deg 306deg, transparent 306deg 330deg,
    rgba(214, 51, 108, .55) 330deg 336deg, transparent 336deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%, #000 68%, transparent 70%);
  mask: radial-gradient(circle, transparent 34%, #000 36%, #000 68%, transparent 70%);
  animation: cg-tp-baan-rays 3s ease infinite;
}
@keyframes cg-tp-baan-in {
  0% { transform: scale(0); opacity: 0; }
  9% { transform: scale(1.3); opacity: 1; }
  15%, 86% { transform: scale(1); }
  95%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes cg-tp-baan-rays {
  0%, 4% { transform: scale(.3) rotate(0); opacity: 0; }
  10% { transform: scale(1) rotate(12deg); opacity: 1; }
  30%, 86% { transform: scale(1.1) rotate(18deg); opacity: .55; }
  95%, 100% { transform: scale(1.15) rotate(20deg); opacity: 0; }
}

<p class="cg-tp-baan"><i aria-hidden="true"></i><span>バーン!</span></p>

GROSS WT. 2099 B ORIGINAL

CRG-19-014

ニュッ

ニュッSlow Peek

.cg-tp-nyu {
  margin: 0;
  overflow: hidden;
  padding-top: 6px;
}
.cg-tp-nyu span {
  display: inline-block;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #5E5AA0;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  animation: cg-tp-nyu-in 3.6s ease-in-out infinite;
}
@keyframes cg-tp-nyu-in {
  0% { transform: translateY(110%) rotate(-4deg); }
  30% { transform: translateY(8%) rotate(2deg); }
  38%, 85% { transform: translateY(0) rotate(0); }
  96%, 100% { transform: translateY(110%); }
}

<p class="cg-tp-nyu"><span>ニュッ</span></p>

GROSS WT. 603 B ORIGINAL

CRG-19-015

ガタガタ

ガタガタRattle Shake

.cg-tp-gata {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #37475C;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .35);
  animation: cg-tp-gata-shake .35s steps(2, jump-none) infinite;
}
@keyframes cg-tp-gata-shake {
  0% { transform: translate(-2px, 1px) rotate(-1deg); }
  25% { transform: translate(2px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, -2px) rotate(-.5deg); }
  75% { transform: translate(2px, 2px) rotate(1deg); }
  100% { transform: translate(-2px, 1px) rotate(-1deg); }
}

<p class="cg-tp-gata">ガタガタ</p>

GROSS WT. 613 B ORIGINAL

CRG-19-016

ズシッ…

ズシッ…Weight Build

.cg-tp-zushi {
  margin: 0;
  font-family: 'M PLUS 1', sans-serif;
  font-size: 36px;
  color: #fff;
  -webkit-text-stroke: 6px #4A5A6E;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .35);
  font-variation-settings: 'wght' 100;
  transform: scale(.9);
  animation: cg-tp-zushi-in 3.2s cubic-bezier(.2, .8, .3, 1) infinite;
}
@keyframes cg-tp-zushi-in {
  0% { font-variation-settings: 'wght' 100; transform: scale(.9) translateY(6px); opacity: 0; }
  30% { font-variation-settings: 'wght' 500; opacity: 1; }
  55% { font-variation-settings: 'wght' 900; transform: scale(1.04) translateY(0); }
  65%, 86% { font-variation-settings: 'wght' 900; transform: scale(1) translateY(0); }
  96%, 100% { font-variation-settings: 'wght' 300; transform: scale(.96) translateY(4px); opacity: 0; }
}

<p class="cg-tp-zushi">ズシッ…</p>

GROSS WT. 848 B ORIGINAL

CRG-19-017

キラリ

キラリShimmer Sweep

.cg-tp-kirakira {
  position: relative;
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  -webkit-text-stroke: 3px #1B1A17;
  paint-order: stroke fill;
  background: linear-gradient(100deg, #E8590C 10%, #F2B707 32%, #fff 44%, #F2B707 56%, #E8590C 78%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-tp-kirakira-in 3.2s ease infinite;
}
/* きらめきはCSSで描いた4方向の光条(絵文字を使わない) */
.cg-tp-kirakira .sp {
  position: absolute;
  right: -18px;
  top: -2px;
  width: 7px;
  height: 7px;
  background: #F2B707;
  box-shadow: 0 -9px 0 -1px #F2B707, 0 9px 0 -1px #F2B707, -9px 0 0 -1px #F2B707, 9px 0 0 -1px #F2B707, 20px 14px 0 -3px #fff;
  transform: scale(0) rotate(0);
  animation: cg-tp-kirakira-sp 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-tp-kirakira-in {
  0% { transform: scale(.4) rotate(-8deg); opacity: 0; background-position: 100% 0; }
  14% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  20%, 82% { transform: scale(1) rotate(0); background-position: 0% 0; }
  90% { background-position: -60% 0; }
  95%, 100% { transform: scale(1) rotate(0); opacity: 0; background-position: -60% 0; }
}
@keyframes cg-tp-kirakira-sp {
  0%, 18% { transform: scale(0) rotate(0); }
  30% { transform: scale(1.2) rotate(45deg); }
  40%, 76% { transform: scale(.9) rotate(90deg); }
  88%, 100% { transform: scale(0) rotate(120deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-tp-kirakira, .cg-tp-kirakira .sp { animation: none; opacity: 1; transform: none; background-position: 0 0; }
  .cg-tp-kirakira .sp { transform: scale(1); }
}

<p class="cg-tp-kirakira">キラリ<i class="sp" aria-hidden="true"></i></p>

GROSS WT. 1751 B ORIGINAL

CRG-19-018

ドロ～ンと

ドロ～ンとMelt Settle

.cg-tp-dororin {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #1E7F8C;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .3);
  transform-origin: 50% 0%;
  animation: cg-tp-dororin-in 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-tp-dororin-in {
  0% { transform: scaleY(1.8) scaleX(.75) translateY(-10px); filter: blur(6px); opacity: 0; }
  20% { transform: scaleY(1.3) scaleX(.88) translateY(6px); filter: blur(3px); opacity: 1; }
  35% { transform: scaleY(.85) scaleX(1.08) translateY(-2px); filter: blur(1px); }
  50%, 85% { transform: scaleY(1) scaleX(1) translateY(0); filter: blur(0); }
  96%, 100% { transform: scaleY(1.3) scaleX(.85) translateY(10px); filter: blur(4px); opacity: 0; }
}

<p class="cg-tp-dororin">ドロ～ンと</p>

GROSS WT. 820 B ORIGINAL

CRG-19-019

ザクッ

ザクッSlice Reveal

.cg-tp-zaku {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #1B1A17;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(232, 89, 12, .4);
  animation: cg-tp-zaku-in 2.8s cubic-bezier(.7, 0, .2, 1) infinite;
}
@keyframes cg-tp-zaku-in {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  14%, 86% { clip-path: inset(0 0 0 0); opacity: 1; }
  96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

<p class="cg-tp-zaku">ザクッ</p>

GROSS WT. 487 B ORIGINAL

CRG-19-020

ピシッ!

ピシッ!RGB Glitch In

.cg-tp-pishi {
  position: relative;
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #1B1A17;
  paint-order: stroke fill;
  animation: cg-tp-pishi-in 3s steps(1, end) infinite;
}
.cg-tp-pishi::before,
.cg-tp-pishi::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-weight: 900;
  -webkit-text-stroke: 6px transparent;
  paint-order: stroke fill;
  opacity: 0;
}
.cg-tp-pishi::before {
  color: #3AC7E8;
  animation: cg-tp-pishi-cyan 3s steps(1, end) infinite;
}
.cg-tp-pishi::after {
  color: #E8306C;
  animation: cg-tp-pishi-mag 3s steps(1, end) infinite;
}
@keyframes cg-tp-pishi-in {
  0%, 4% { opacity: 0; }
  6%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes cg-tp-pishi-cyan {
  0%, 4% { opacity: 0; transform: translate(0, 0); }
  6% { opacity: .8; transform: translate(-4px, 1px); }
  8% { opacity: 0; transform: translate(2px, -1px); }
  9% { opacity: .6; transform: translate(-3px, 0); }
  11%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes cg-tp-pishi-mag {
  0%, 4% { opacity: 0; transform: translate(0, 0); }
  6% { opacity: .8; transform: translate(4px, -1px); }
  8% { opacity: 0; transform: translate(-2px, 1px); }
  9% { opacity: .6; transform: translate(3px, 0); }
  11%, 100% { opacity: 0; transform: translate(0, 0); }
}

<p class="cg-tp-pishi" data-text="ピシッ!">ピシッ!</p>

GROSS WT. 1405 B ORIGINAL

CRG-19-021

ギラッ

ギラッHolo Shimmer

.cg-tp-gira {
  position: relative;
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  -webkit-text-stroke: 5px #1B1A17;
  paint-order: stroke fill;
  background: linear-gradient(100deg, #E8590C 0%, #F2B707 25%, #3A5A78 50%, #C89B6C 75%, #E8590C 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    cg-tp-gira-in 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite,
    cg-tp-gira-holo 1.6s linear infinite;
}
@keyframes cg-tp-gira-in {
  0% { transform: scale(.3) rotate(-10deg); opacity: 0; }
  14% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  20%, 82% { transform: scale(1) rotate(0deg); opacity: 1; }
  92%, 100% { transform: scale(.3) rotate(6deg); opacity: 0; }
}
@keyframes cg-tp-gira-holo {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
/* きらめきはCSSで描いた光条(絵文字を使わない) */
.cg-tp-gira .sp {
  position: absolute;
  right: -20px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: #F2B707;
  box-shadow: 0 -11px 0 -1px #F2B707, 0 11px 0 -1px #F2B707, -11px 0 0 -1px #F2B707, 11px 0 0 -1px #F2B707, 22px 18px 0 -3px #fff;
  transform: scale(0);
  animation: cg-tp-gira-sp 2.8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-tp-gira-sp {
  0%, 16% { transform: scale(0) rotate(0); }
  28% { transform: scale(1.25) rotate(45deg); }
  38%, 78% { transform: scale(.92) rotate(90deg); }
  90%, 100% { transform: scale(0) rotate(130deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-tp-gira, .cg-tp-gira .sp { animation: none; opacity: 1; }
  .cg-tp-gira { transform: none; background-position: 0 50%; }
  .cg-tp-gira .sp { transform: scale(1); }
}

<p class="cg-tp-gira">ギラッ<i class="sp" aria-hidden="true"></i></p>

GROSS WT. 1797 B ORIGINAL

CRG-19-022

クイッ

クイッ3D Flip In

.cg-tp-kuit {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #3A5A78;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .35);
  transform-origin: 50% 100%;
  animation: cg-tp-kuit-in 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-tp-kuit-in {
  0% { transform: perspective(400px) rotateX(90deg) translateY(10px); opacity: 0; }
  16% { transform: perspective(400px) rotateX(-14deg) translateY(0); opacity: 1; }
  24%, 84% { transform: perspective(400px) rotateX(0deg) translateY(0); opacity: 1; }
  94%, 100% { transform: perspective(400px) rotateX(90deg) translateY(10px); opacity: 0; }
}

<p class="cg-tp-kuit">クイッ</p>

GROSS WT. 701 B ORIGINAL

CRG-19-023

ぼわっ

ぼわっNeon Bloom

.cg-tp-bowa {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 4px #0C0A09;
  paint-order: stroke fill;
  animation: cg-tp-bowa-in 3.2s ease-in-out infinite;
}
@keyframes cg-tp-bowa-in {
  0% { opacity: 0; transform: scale(.85); text-shadow: 0 0 0 rgba(58, 90, 120, 0); }
  12% { opacity: 1; transform: scale(1); text-shadow: 0 0 8px rgba(58, 90, 120, .6), 0 0 18px rgba(58, 90, 120, .4); }
  20% { text-shadow: 0 0 14px rgba(58, 90, 120, .9), 0 0 34px rgba(58, 90, 120, .6), 0 0 60px rgba(58, 90, 120, .3); }
  30%, 80% { text-shadow: 0 0 10px rgba(58, 90, 120, .7), 0 0 24px rgba(58, 90, 120, .45); }
  92%, 100% { opacity: 0; transform: scale(.85); text-shadow: 0 0 0 rgba(58, 90, 120, 0); }
}

<p class="cg-tp-bowa">ぼわっ</p>

GROSS WT. 772 B ORIGINAL

テロップ・登場エフェクト23点 在庫あり