本文へスキップ

CRG-19 — TELOP FX

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

動画編集ソフトのテロップ風。擬音で選べる文字の登場演出。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

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
CRG-19-024

バチンッ!

バチンッ!Electric Zap

.cg-tp-bachin {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 18px 26px;
}
/* ①稲妻が落ちる(CSSのclip-pathで描画。画像も絵文字も使わない) */
.cg-tp-bachin-bolt {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 26px;
  height: 58px;
  margin-left: -13px;
  background: linear-gradient(180deg, #FFF6C9, #F2B707 55%, #E8590C);
  clip-path: polygon(58% 0, 20% 46%, 46% 46%, 14% 100%, 82% 38%, 52% 38%, 92% 0);
  opacity: 0;
  animation: cg-tp-bachin-bolt 2.8s cubic-bezier(.2, .9, .3, 1) infinite;
}
/* ②文字が着弾して潰れ、戻りで少し伸びる */
.cg-tp-bachin-txt {
  position: relative;
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
  color: #FFF6C9;
  -webkit-text-stroke: 7px #1B1A17;
  paint-order: stroke fill;
  transform: scale(0);
  animation: cg-tp-bachin-hit 2.8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* ③衝撃波リングが残光として広がって消える */
.cg-tp-bachin-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 4px solid rgba(242, 183, 7, .9);
  transform: scale(.2);
  opacity: 0;
  animation: cg-tp-bachin-arc 2.8s cubic-bezier(.16, .84, .34, 1) infinite;
}
@keyframes cg-tp-bachin-bolt {
  0% { opacity: 0; transform: translateY(-26px) scaleY(.4); }
  8% { opacity: 1; transform: translateY(0) scaleY(1.14); filter: brightness(1.9); }
  13% { opacity: .35; transform: translateY(0) scaleY(1); filter: brightness(1); }
  17% { opacity: 1; transform: translateY(0) scaleY(1.04); filter: brightness(1.6); }
  26%, 100% { opacity: 0; transform: translateY(0) scaleY(.9); }
}
@keyframes cg-tp-bachin-hit {
  0%, 10% { transform: scale(0) rotate(-6deg); opacity: 0; }
  16% { transform: scale(1.28, .72) rotate(2deg); opacity: 1; text-shadow: 0 0 22px rgba(242, 183, 7, .95); }
  24% { transform: scale(.94, 1.12) rotate(-1.5deg); text-shadow: 0 0 14px rgba(242, 183, 7, .7); }
  32% { transform: scale(1.04, .97) rotate(.6deg); }
  40%, 84% { transform: scale(1) rotate(0deg); opacity: 1; text-shadow: 4px 5px 0 rgba(27, 26, 23, .35); }
  94%, 100% { transform: scale(.4) rotate(5deg); opacity: 0; }
}
@keyframes cg-tp-bachin-arc {
  0%, 12% { transform: scale(.2); opacity: 0; border-width: 6px; }
  18% { transform: scale(.85); opacity: .95; border-width: 5px; }
  34% { transform: scale(1.5); opacity: .35; border-width: 2px; }
  46%, 100% { transform: scale(1.9); opacity: 0; border-width: 1px; }
}
/* 動きを止めたときは「着弾し切った状態」で静止させる */
@media (prefers-reduced-motion: reduce) {
  .cg-tp-bachin-bolt,
  .cg-tp-bachin-txt,
  .cg-tp-bachin-arc { animation: none; }
  .cg-tp-bachin-txt { transform: scale(1); opacity: 1; text-shadow: 4px 5px 0 rgba(27, 26, 23, .35); }
  .cg-tp-bachin-bolt { opacity: 1; transform: none; }
  .cg-tp-bachin-arc { opacity: .3; transform: scale(1.2); }
}
<p class="cg-tp-bachin"><i class="cg-tp-bachin-bolt" aria-hidden="true"></i><span class="cg-tp-bachin-txt">バチンッ!</span><i class="cg-tp-bachin-arc" aria-hidden="true"></i></p>
GROSS WT. 3131 B ORIGINAL
CRG-19-025

シュワ〜

シュワ〜Fizz Up

/* 物語: 泡が絶えず立ちのぼる炭酸の中から文字が浮上 → 水面でふわっと膨らんで軽く戻る(ばね) →
   遅れて光沢が抜ける → 沈んでループ */
.cg-tp-shuwa {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 26px 32px 22px;
  border-radius: 14px;
  background: linear-gradient(170deg, #2C93C4, #12557B);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
/* ①②泡の層を2枚。粒径と速度を変えて奥行きを出す。上端でマスクして消える */
.cg-tp-shuwa-fizz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, 0) 88%);
  mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, 0) 88%);
}
.cg-tp-shuwa-fizz::before,
.cg-tp-shuwa-fizz::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
}
.cg-tp-shuwa-fizz::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 40%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle, rgba(214, 243, 255, .8) 40%, rgba(214, 243, 255, 0) 45%);
  background-size: 24px 32px, 37px 45px;
  background-position: 4px 0, 16px 11px;
  animation: cg-tp-shuwa-rise 2.8s linear infinite;
}
.cg-tp-shuwa-fizz::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .7) 38%, rgba(255, 255, 255, 0) 43%),
    radial-gradient(circle, rgba(255, 255, 255, .45) 38%, rgba(255, 255, 255, 0) 43%);
  background-size: 45px 57px, 63px 74px;
  background-position: 21px 7px, 41px 29px;
  animation: cg-tp-shuwa-rise 4.6s linear infinite;
}
/* ③文字。沈んだ位置から浮上し、水面で潰れと伸びを起こしてから静定する */
.cg-tp-shuwa-txt {
  position: relative;
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 6px #0B3550;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(11, 53, 80, .4);
  transform: translateY(20px) scale(.84, 1.1);
  opacity: 0;
  animation: cg-tp-shuwa-in 3.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* ④副次レイヤー: 静定した後に光沢が一度だけ抜ける */
.cg-tp-shuwa-txt::after {
  content: "";
  position: absolute;
  left: -14%;
  top: -8%;
  width: 32%;
  height: 116%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  filter: blur(3px);
  opacity: 0;
  animation: cg-tp-shuwa-sheen 3.6s ease-out infinite;
}
@keyframes cg-tp-shuwa-rise {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes cg-tp-shuwa-in {
  0%        { transform: translateY(20px) scale(.84, 1.1); opacity: 0; }
  11%       { transform: translateY(3px) scale(1.08, .93); opacity: 1; }
  18%       { transform: translateY(-5px) scale(.96, 1.06); }
  25%       { transform: translateY(0) scale(1.03, .98); }
  33%, 78%  { transform: translateY(0) scale(1, 1); opacity: 1; }
  87%       { transform: translateY(-3px) scale(1.02, .97); opacity: .75; }
  96%, 100% { transform: translateY(16px) scale(.86, 1.08); opacity: 0; }
}
@keyframes cg-tp-shuwa-sheen {
  0%, 34%   { transform: translateX(0) skewX(-12deg); opacity: 0; }
  42%       { opacity: .85; }
  58%       { opacity: .5; }
  70%, 100% { transform: translateX(360%) skewX(-12deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* 静止形: 泡が静止した炭酸の中に文字が立っている一枚絵。テロップとして読める */
  .cg-tp-shuwa-fizz::before,
  .cg-tp-shuwa-fizz::after,
  .cg-tp-shuwa-txt,
  .cg-tp-shuwa-txt::after { animation: none; }
  .cg-tp-shuwa-fizz::before { transform: translateY(-18%); }
  .cg-tp-shuwa-fizz::after { transform: translateY(-32%); }
  .cg-tp-shuwa-txt { transform: none; opacity: 1; }
  .cg-tp-shuwa-txt::after { opacity: 0; }
}
<p class="cg-tp-shuwa"><i class="cg-tp-shuwa-fizz" aria-hidden="true"></i><span class="cg-tp-shuwa-txt">シュワ〜</span></p>
GROSS WT. 4013 B ORIGINAL