16 CSS Fade In Animation Designs11 / 16

Pure CSSMIT licensed

Skew Sweep Fade

Three stat panels slice into frame from the left using skewX(15deg) + translateX(-40px) → skewX(0) — a momentum-carrying diagonal sweep entrance.

Published

Live Demo
Try it

The code

<div class="fi-11">
  <div class="fi-11__block">
    <div class="fi-11__num">847K</div>
    <div class="fi-11__stat">Monthly Views</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">Panels slice into view from the left with a momentum-carrying skew.</div>
  </div>
  <div class="fi-11__block">
    <div class="fi-11__num">12.3K</div>
    <div class="fi-11__stat">Subscribers</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">skewX(15deg) creates a dynamic diagonal entry effect.</div>
  </div>
  <div class="fi-11__block">
    <div class="fi-11__num">98%</div>
    <div class="fi-11__stat">Satisfaction</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">Combined with translateX for a satisfying sweeping entrance.</div>
  </div>
</div>
.fi-11 {
  --bg: #0f0a14;
  --rose: #f43f5e;
  --pink: #ec4899;
  --text: #fff1f2;
  font-family: 'DM Sans',sans-serif;
  min-height: 340px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 40px;
  overflow: hidden;
}

.fi-11 *,
.fi-11 *::before,
.fi-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fi-11 ::selection {
  background: var(--rose);
  color: #fff;
}
/* skew + fade: skewX(15deg) translateX(-40px) opacity:0 → skewX(0) translateX(0) opacity:1 */

.fi-11__block {
  border-radius: 14px;
  padding: 28px 24px;
  flex: 1;
  min-width: 160px;
  max-width: 200px;
  opacity: 0;
  transform: skewX(15deg) translateX(-40px);
  animation: fi-11-skew-in .7s cubic-bezier(.16,1,.3,1) forwards;
}

.fi-11__block:nth-child(1) {
  --d: .05s;
  background: linear-gradient(135deg,rgba(244,63,94,.18),rgba(236,72,153,.08));
  border: 1px solid rgba(244,63,94,.25);
}

.fi-11__block:nth-child(2) {
  --d: .2s;
  background: linear-gradient(135deg,rgba(236,72,153,.18),rgba(168,85,247,.08));
  border: 1px solid rgba(236,72,153,.25);
}

.fi-11__block:nth-child(3) {
  --d: .35s;
  background: linear-gradient(135deg,rgba(168,85,247,.18),rgba(99,102,241,.08));
  border: 1px solid rgba(168,85,247,.25);
}

.fi-11__block {
  animation-delay: var(--d);
}

.fi-11__block:hover {
  transform: skewX(0) translateX(0) scale(1.03)!important;
  transition: transform .25s;
}

.fi-11__num {
  font-family: 'Syne',sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.fi-11__block:nth-child(1) .fi-11__num {
  color: var(--rose);
}

.fi-11__block:nth-child(2) .fi-11__num {
  color: var(--pink);
}

.fi-11__block:nth-child(3) .fi-11__num {
  color: #a78bfa;
}

.fi-11__stat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,241,242,.45);
  margin-bottom: 14px;
}

.fi-11__divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin-bottom: 12px;
}

.fi-11__desc {
  font-size: .78rem;
  color: rgba(255,241,242,.55);
  line-height: 1.5;
}

@keyframes fi-11-skew-in {
  to {
    opacity: 1;
    transform: skewX(0deg) translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fi-11 * {
    animation: none!important;
    opacity: 1!important;
    transform: none!important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Fade In Animation Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Skew Sweep Fade
Source: https://codefronts.com/motion/css-fade-in-animation/skew-sweep-fade/

Three stat panels slice into frame from the left using skewX(15deg) + translateX(-40px) → skewX(0) — a momentum-carrying diagonal sweep entrance.
## HTML
```html
<div class="fi-11">
  <div class="fi-11__block">
    <div class="fi-11__num">847K</div>
    <div class="fi-11__stat">Monthly Views</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">Panels slice into view from the left with a momentum-carrying skew.</div>
  </div>
  <div class="fi-11__block">
    <div class="fi-11__num">12.3K</div>
    <div class="fi-11__stat">Subscribers</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">skewX(15deg) creates a dynamic diagonal entry effect.</div>
  </div>
  <div class="fi-11__block">
    <div class="fi-11__num">98%</div>
    <div class="fi-11__stat">Satisfaction</div>
    <div class="fi-11__divider"></div>
    <div class="fi-11__desc">Combined with translateX for a satisfying sweeping entrance.</div>
  </div>
</div>
```
## CSS
```css
.fi-11 {
  --bg: #0f0a14;
  --rose: #f43f5e;
  --pink: #ec4899;
  --text: #fff1f2;
  font-family: 'DM Sans',sans-serif;
  min-height: 340px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 40px;
  overflow: hidden;
}

.fi-11 *,
.fi-11 *::before,
.fi-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fi-11 ::selection {
  background: var(--rose);
  color: #fff;
}
/* skew + fade: skewX(15deg) translateX(-40px) opacity:0 → skewX(0) translateX(0) opacity:1 */

.fi-11__block {
  border-radius: 14px;
  padding: 28px 24px;
  flex: 1;
  min-width: 160px;
  max-width: 200px;
  opacity: 0;
  transform: skewX(15deg) translateX(-40px);
  animation: fi-11-skew-in .7s cubic-bezier(.16,1,.3,1) forwards;
}

.fi-11__block:nth-child(1) {
  --d: .05s;
  background: linear-gradient(135deg,rgba(244,63,94,.18),rgba(236,72,153,.08));
  border: 1px solid rgba(244,63,94,.25);
}

.fi-11__block:nth-child(2) {
  --d: .2s;
  background: linear-gradient(135deg,rgba(236,72,153,.18),rgba(168,85,247,.08));
  border: 1px solid rgba(236,72,153,.25);
}

.fi-11__block:nth-child(3) {
  --d: .35s;
  background: linear-gradient(135deg,rgba(168,85,247,.18),rgba(99,102,241,.08));
  border: 1px solid rgba(168,85,247,.25);
}

.fi-11__block {
  animation-delay: var(--d);
}

.fi-11__block:hover {
  transform: skewX(0) translateX(0) scale(1.03)!important;
  transition: transform .25s;
}

.fi-11__num {
  font-family: 'Syne',sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.fi-11__block:nth-child(1) .fi-11__num {
  color: var(--rose);
}

.fi-11__block:nth-child(2) .fi-11__num {
  color: var(--pink);
}

.fi-11__block:nth-child(3) .fi-11__num {
  color: #a78bfa;
}

.fi-11__stat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,241,242,.45);
  margin-bottom: 14px;
}

.fi-11__divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin-bottom: 12px;
}

.fi-11__desc {
  font-size: .78rem;
  color: rgba(255,241,242,.55);
  line-height: 1.5;
}

@keyframes fi-11-skew-in {
  to {
    opacity: 1;
    transform: skewX(0deg) translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fi-11 * {
    animation: none!important;
    opacity: 1!important;
    transform: none!important;
  }
}
```

How this works

Each panel starts at opacity: 0; transform: skewX(15deg) translateX(-40px). The keyframe animates both to zero, removing the skew as the panel moves into position. The order of transforms matters: skewX before translateX means the translation axis is skewed too — giving the entry a diagonal vector rather than a purely horizontal slide.

The cubic-bezier(.16, 1, .3, 1) strong ease-out makes the skew feel like momentum being shed — the panel arrives fast and skewed, then 'catches itself' and straightens. Hover removes both the skew and translation with a transition override rather than the animation, allowing the resting state to be interactively modified without conflicting with animation-fill-mode: forwards.

Make it yours

  • Reverse skew direction: use skewX(-15deg) translateX(40px) for a right-to-left entry.
  • Reduce skew magnitude to 8deg for a subtler tilt — still directional but less dramatic.
  • Add a delay between panels: increase from .15s steps to .25s for a slower staggered reveal.
  • Combine with a translateY(-10px → 0) offset so panels rise and straighten simultaneously.

Gotchas — read before shipping

  • The order of transform functions matters: skewX(15deg) translateX(-40px) skews the translation axis, creating a diagonal path. Reversing to translateX(-40px) skewX(15deg) produces a different visual — the element slides horizontally then straightens.
  • Using !important on hover is necessary because animation-fill-mode: forwards keeps the final keyframe state locked — without !important, hover transforms are ignored.
  • Skew animations can cause text to appear distorted during the transition. Adding -webkit-font-smoothing: antialiased and text-rendering: optimizeLegibility reduces the distortion.

Browser support

ChromeSafariFirefoxEdge
60+12+60+60+

skewX() combined with translateX() in a single transform chain is fully supported

Techniques used in this demo

@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →