Animation Transition Samples

Color-block demos for portrait reveal, home-screen transitions, hover effects and code snippets.

Portrait Reveal

HTML:



<div class="portrait-demo"></div>

CSS:


.portrait-demo {width:280px;height:380px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#001f2f;font-weight:700;font-family:system-ui,sans-serif;box-shadow:0 8px 30px rgba(0,0,0,0.5);animation:portraitReveal 4s ease-in-out infinite;background:linear-gradient(180deg,#a0f,#0ff);}
@keyframes portraitReveal {0%{transform:translateY(8%) scale(.98);opacity:0;}20%{transform:translateY(0%) scale(1);opacity:1;}80%{transform:translateY(0%) scale(1);opacity:1;}100%{transform:translateY(-6%) scale(.98);opacity:0;}}

3-Card Portrait Transition

Card One

Card Two

Card Three

HTML:



<div class="portrait-wrapper">
  <div class="portrait-card"><div class="portrait-inner"></div><div class="portrait-title">Card One</div></div>
  <div class="portrait-card"><div class="portrait-inner"></div><div class="portrait-title">Card Two</div></div>
  <div class="portrait-card"><div class="portrait-inner"></div><div class="portrait-title">Card Three</div></div>
</div>

CSS:


.portrait-wrapper {width:100%;max-width:900px;margin:3rem auto;display:flex;justify-content:center;gap:2rem;perspective:1200px;}
.portrait-card {width:200px;height:350px;background:linear-gradient(135deg,#111,#333);border:2px solid #0ff;border-radius:1rem;position:relative;overflow:hidden;transform-style:preserve-3d;animation:cardSlide 6s ease-in-out infinite;animation-fill-mode:both;}
.portrait-card:nth-child(2){animation-delay:1s;}
.portrait-card:nth-child(3){animation-delay:2s;}
.portrait-inner {width:100%;height:100%;background:linear-gradient(180deg,#0ff,#004d4d);animation:portraitGlow 4s infinite alternate;}
.portrait-title {position:absolute;bottom:0;width:100%;padding:0.6rem;text-align:center;background:rgba(0,255,255,0.15);backdrop-filter:blur(4px);font-size:1rem;border-top:1px solid #0ff;}
@keyframes cardSlide {0%{transform:rotateY(-30deg) translateX(-150px) scale(0.8);opacity:0;}20%{transform:rotateY(0deg) translateX(0) scale(1);opacity:1;}60%{transform:rotateY(0deg) translateX(0) scale(1);opacity:1;}100%{transform:rotateY(30deg) translateX(150px) scale(0.8);opacity:0;}}
@keyframes portraitGlow {0%{filter:brightness(0.8);}100%{filter:brightness(1.3);}}

Full-width Sliding Layer

HTML:



<div class="full-transition">
  <div class="layer"></div>
</div>

CSS:


.full-transition {width:100%;height:180px;border-radius:10px;margin:0.5rem 0;overflow:hidden;position:relative;box-shadow:inset 0 0 60px rgba(255,255,255,0.03);}
.full-transition .layer {position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,255,255,0.95), rgba(255,0,255,0.85));transform-origin:center;animation:slideAcross 4s linear infinite;}

Hover Bounce

Hover / Focus

HTML:



<div class="bounce-card"><div>Hover / Focus</div></div>

CSS:


.bounce-card {width:300px;height:150px;background:linear-gradient(180deg,#0b0b0b,#111);border:2px solid rgba(0,255,255,0.15);border-radius:12px;margin:1rem auto;display:flex;align-items:center;justify-content:center;transition:transform .25s ease, box-shadow .25s ease;}
.bounce-card:hover, .bounce-card:focus {animation:bounce 0.9s ease 1;transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,255,255,0.06);}

Pulsing CTA

CTA Highlight

HTML:



<div class="pulse-block">CTA Highlight</div>

CSS:


.pulse-block {width:260px;height:120px;border-radius:10px;margin:1rem auto;background:linear-gradient(135deg,#001122,#003344);animation:pulse 2.2s ease-in-out infinite;display:flex;align-items:center;justify-content:center;color:#0ff;font-weight:600;}

Grid Sliding Panels

HTML:



<div class="grid-demo">
  <div class="cell">A</div>
  <div class="cell">B</div>
  <div class="cell">C</div>
</div>

CSS:


.grid-demo {margin-top:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.grid-demo .cell {height:120px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#002;}
.grid-demo .cell:nth-child(1){animation:fadeInOut 5s infinite;background:linear-gradient(135deg,#bff,#0ff);}
.grid-demo .cell:nth-child(2){animation:slideAcross 6s infinite;background:linear-gradient(135deg,#9ef,#0cf);}
.grid-demo .cell:nth-child(3){animation:pulse 3s infinite;background:linear-gradient(135deg,#7cf,#099);}