https://codeharborhub.github.io/assets/js/0c896e58.b087c685.js

1"use strict";(self.webpackChunkcodeharborhub=self.webpackChunkcodeharborhub||[]).push([[4069],{28453:(n,e,s)=>{s.d(e,{R:()=>a,x:()=>o});var t=s(96540);const i={},r=t.createContext(i);function a(n){const e=t.useContext(r);return t.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function o(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(i):n.components||i:a(n.components),t.createElement(r.Provider,{value:e},n.children)}},47329:(n,e,s)=>{s.r(e),s.d(e,{assets:()=>l,contentTitle:()=>o,default:()=>m,frontMatter:()=>a,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"css/module-4-modern-css/transitions-transforms-animations","title":"Transitions, Transforms & Keyframe Animations","description":"Master modern CSS motion design\u2014hardware-accelerated 2D/3D transforms, fluid transitions, timing functions, and multi-stage @keyframes animations.","source":"@site/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md","sourceDirName":"css/module-4-modern-css","slug":"/css/module-4-modern-css/transitions-transforms-animations","permalink":"/courses/css/module-4-modern-css/transitions-transforms-animations","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"CSS","permalink":"/courses/tags/css"},{"inline":true,"label":"Animations","permalink":"/courses/tags/animations"},{"inline":true,"label":"Transitions","permalink":"/courses/tags/transitions"},{"inline":true,"label":"Transforms","permalink":"/courses/tags/transforms"},{"inline":true,"label":"Motion Design","permalink":"/courses/tags/motion-design"},{"inline":true,"label":"CodeHarborHub","permalink":"/courses/tags/code-harbor-hub"}],"version":"current","lastUpdatedBy":"Ajay Dhangar","lastUpdatedAt":1788083841000,"sidebarPosition":3,"frontMatter":{"id":"transitions-transforms-animations","title":"Transitions, Transforms & Keyframe Animations","sidebar_label":"Lecture 14","sidebar_position":3,"description":"Master modern CSS motion design\u2014hardware-accelerated 2D/3D transforms, fluid transitions, timing functions, and multi-stage @keyframes animations.","tags":["CSS","Animations","Transitions","Transforms","Motion Design","CodeHarborHub"]},"sidebar":"codeharborhub","previous":{"title":"Lecture 13","permalink":"/courses/css/module-4-modern-css/responsive-design-media-queries"},"next":{"title":"Lecture 15","permalink":"/courses/css/module-4-modern-css/container-queries"}}');var i=s(74848),r=s(28453);const a={id:"transitions-transforms-animations",title:"Transitions, Transforms & Keyframe Animations",sidebar_label:"Lecture 14",sidebar_position:3,description:"Master modern CSS motion design\u2014hardware-accelerated 2D/3D transforms, fluid transitions, timing functions, and multi-stage @keyframes animations.",tags:["CSS","Animations","Transitions","Transforms","Motion Design","CodeHarborHub"]},o=void 0,l={},c=[{value:"1. 2D &amp; 3D CSS Transforms",id:"1-2d--3d-css-transforms",level:2},{value:"Common Transform Properties",id:"common-transform-properties",level:3},{value:"2. CSS Transitions",id:"2-css-transitions",level:2},{value:"Shorthand Syntax",id:"shorthand-syntax",level:3},{value:"Common Timing Functions (<code>transition-timing-function</code>)",id:"common-timing-functions-transition-timing-function",level:3},{value:"3. Multi-Stage Keyframe Animations",id:"3-multi-stage-keyframe-animations",level:2},{value:"Defining Keyframes &amp; Applying Animations",id:"defining-keyframes--applying-animations",level:3},{value:"Interactive Playground: Hardware-Accelerated Motion",id:"interactive-playground-hardware-accelerated-motion",level:2},{value:"Summary Reference Table",id:"summary-reference-table",level:2}];function d(n){const e={admonition:"admonition",annotation:"annotation",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",math:"math",mrow:"mrow",mtext:"mtext",p:"p",pre:"pre",semantics:"semantics",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...n.components},{CodePreview:s}=e;return s||function(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodePreview",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.p,{children:["Adding motion to web user interfaces elevates the user experience by providing visual feedback, guiding user attention, and creating polished interactions. CSS provides three core mechanisms for UI motion: ",(0,i.jsx)(e.strong,{children:"Transforms"}),", ",(0,i.jsx)(e.strong,{children:"Transitions"}),", and ",(0,i.jsx)(e.strong,{children:"Keyframe Animations"}),"."]}),"\n",(0,i.jsx)(e.h2,{id:"1-2d--3d-css-transforms",children:"1. 2D & 3D CSS Transforms"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"transform"})," property allows you to visually manipulate an element's spatial geometry without disturbing the surrounding normal document flow (preventing unnecessary layout reflows)."]}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{children:"                  [ CSS Transform Functions ]\n                               \u2502\n  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n  \u25bc                \u25bc                       \u25bc                \u25bc\n[ translate() ]  [ scale() ]           [ rotate() ]     [ skew() ]\nMoves element     Resizes element      Rotates element  Tilts element along\nalong X/Y/Z axes  relative to origin   by angle deg     X/Y axes\n\n"})}),"\n",(0,i.jsx)(e.h3,{id:"common-transform-properties",children:"Common Transform Properties"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-css",children:".card {\n  /* Combine multiple transform operations */\n  transform: translateY(-8px) scale(1.03) rotate(1deg);\n  \n  /* Change the origin point of transformation (Default: 50% 50%) */\n  transform-origin: top left;\n}\n\n"})}),"\n",(0,i.jsx)(e.admonition,{title:"Performance Optimization",type:"tip",children:(0,i.jsxs)(e.p,{children:["Always prefer animating ",(0,i.jsx)(e.code,{children:"transform"})," and ",(0,i.jsx)(e.code,{children:"opacity"}),". Browsers offload these properties directly to the GPU (Graphics Processing Unit), avoiding expensive layout recalculations (",(0,i.jsx)(e.code,{children:"reflow"}),") and repaints."]})}),"\n",(0,i.jsx)(e.h2,{id:"2-css-transitions",children:"2. CSS Transitions"}),"\n",(0,i.jsxs)(e.p,{children:["CSS Transitions enable smooth value changes over a specified duration when an element switches between different visual states (such as ",(0,i.jsx)(e.code,{children:":hover"}),", ",(0,i.jsx)(e.code,{children:":focus"}),", or JavaScript class toggles)."]}),"\n",(0,i.jsx)(e.h3,{id:"shorthand-syntax",children:"Shorthand Syntax"}),"\n",(0,i.jsx)(e.span,{className:"katex-display",children:(0,i.jsxs)(e.span,{className:"katex",children:[(0,i.jsx)(e.span,{className:"katex-mathml",children:(0,i.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,i.jsxs)(e.semantics,{children:[(0,i.jsx)(e.mrow,{children:(0,i.jsx)(e.mtext,{children:"transition:\xa0[property]\xa0[duration]\xa0[timing-function]\xa0[delay];"})}),(0,i.jsx)(e.annotation,{encoding:"application/x-tex",children:"\\text{transition: [property] [duration] [timing-function] [delay];}"})]})})}),(0,i.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,i.jsxs)(e.span,{className:"base",children:[(0,i.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,i.jsx)(e.span,{className:"mord text",children:(0,i.jsx)(e.span,{className:"mord",children:"transition:\xa0[property]\xa0[duration]\xa0[timing-function]\xa0[delay];"})})]})})]})}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-css",children:".button {\n  background-color: #2563eb;\n  transform: scale(1);\n  \n  /* Transition specific properties for optimal performance */\n  transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.button:hover {\n  background-color: #1d4ed8;\n  transform: scale(1.05);\n}\n\n"})}),"\n",(0,i.jsxs)(e.h3,{id:"common-timing-functions-transition-timing-function",children:["Common Timing Functions (",(0,i.jsx)(e.code,{children:"transition-timing-function"}),")"]}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"ease"})," ",(0,i.jsx)(e.em,{children:"(default)"}),": Starts slow, speeds up, then slows down."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"linear"}),": Constant speed from start to end."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"ease-in-out"}),": Symmetric slow start and end."]}),"\n",(0,i.jsxs)(e.li,{children:[(0,i.jsx)(e.code,{children:"cubic-bezier(p1, p2, p3, p4)"}),": Custom acceleration curve for ultra-smooth UI motion."]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"3-multi-stage-keyframe-animations",children:"3. Multi-Stage Keyframe Animations"}),"\n",(0,i.jsxs)(e.p,{children:["While transitions require a state change trigger (like ",(0,i.jsx)(e.code,{children:":hover"}),"), ",(0,i.jsx)(e.code,{children:"@keyframes"})," animations run automatically, can loop infinitely, and support complex multi-step sequences."]}),"\n",(0,i.jsx)(e.h3,{id:"defining-keyframes--applying-animations",children:"Defining Keyframes & Applying Animations"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-css",children:"/* 1. Define the Keyframe Sequence */\n@keyframes pulseGlow {\n  0% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);\n  }\n  50% {\n    transform: scale(1.05);\n    box-shadow: 0 0 20px 10px rgba(37, 99, 235, 0);\n  }\n  100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);\n  }\n}\n\n/* 2. Apply to Element */\n.badge-live {\n  /* animation: name duration timing-function delay iteration-count direction fill-mode */\n  animation: pulseGlow 2s ease-in-out infinite;\n}\n\n"})}),"\n",(0,i.jsx)(e.h2,{id:"interactive-playground-hardware-accelerated-motion",children:"Interactive Playground: Hardware-Accelerated Motion"}),"\n",(0,i.jsx)(e.p,{children:"Test combined transform state changes, transition curves, and continuous keyframe loops in the live editor below:"}),"\n",(0,i.jsx)(s,{defaultHtml:'\n<div class="interactive-box transition-box">\n  Hover Me\n</div>\n\n<div class="interactive-box animation-box">\n  Floating Pulse\n</div>\n',defaultCss:"\n/* Base Box Style */\n.interactive-box {\nwidth: 140px;\nheight: 100px;\nborder-radius: 8px;\ncolor: #ffffff;

1\nfont-weight: 600;\nfont-size: 0.85rem;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\ntext-align: center;\ncursor: pointer;\n}\n\n/* 1. Transition Box */\n.transition-box {\nbackground-color: #2563eb;\ntransition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;\n}\n\n.transition-box:hover {\ntransform: translateY(-10px) scale(1.08);\nbackground-color: #059669;\n}\n\n/* 2. Keyframe Animation Box */\n.animation-box {\nbackground-color: #d97706;\nanimation: floatPulse 2.5s ease-in-out infinite;\n}\n\n@keyframes floatPulse {\n0%, 100% {\ntransform: translateY(0);\n}\n50% {\ntransform: translateY(-8px) scale(1.04);\n}\n}",height:"340px"}),"\n",(0,i.jsx)(e.h2,{id:"summary-reference-table",children:"Summary Reference Table"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Motion Tool"}),(0,i.jsx)(e.th,{children:"Primary Trigger"}),(0,i.jsx)(e.th,{children:"Complexity Level"}),(0,i.jsx)(e.th,{children:"GPU Accelerated?"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:"transform"})})}),(0,i.jsx)(e.td,{children:"Applied directly or via state"}),(0,i.jsx)(e.td,{children:"Spatial changes (move, rotate, scale)"}),(0,i.jsx)(e.td,{children:"Yes"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:"transition"})})}),(0,i.jsxs)(e.td,{children:["State change (",(0,i.jsx)(e.code,{children:":hover"}),", JS class)"]}),(0,i.jsx)(e.td,{children:"A-to-B smooth state interpolation"}),(0,i.jsx)(e.td,{children:"Yes (for opacity/transform)"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.strong,{children:(0,i.jsx)(e.code,{children:"@keyframes"})})}),(0,i.jsx)(e.td,{children:"Page load or class assignment"}),(0,i.jsx)(e.td,{children:"Multi-step dynamic sequence loops"}),(0,i.jsx)(e.td,{children:"Yes (for opacity/transform)"})]})]})]})]})}function m(n={}){const{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(d,{...n})}):d(n)}}}]);