📖
CSS Transitions and Animations
transition, transform, @keyframes — bringing the page to life
transition — smooth style change
transition is set on the element and fires on any CSS property change (usually via :hover).
css
.btn {
background: #6070f7;
transform: scale(1);
/* transition: property duration timing-function delay */
transition: background 0.2s ease, transform 0.2s ease;
/* Or for all properties */
transition: all 0.2s ease;
}
.btn:hover {
background: #4f5fea;
transform: scale(1.05); /* slightly enlarge */
}Timing functions:
ease— slow → fast → slow (natural)linear— constant speedease-in— starts slowease-out— ends slow (great for elements appearing)
transform — element transformation
transform doesn't move the element in the document flow — it's a purely visual change. The browser can animate it via the GPU.
css
.element {
/* Translate */
transform: translateX(20px); /* right */
transform: translateY(-10px); /* up */
transform: translate(20px, -10px); /* both */
/* Scale */
transform: scale(1.1); /* +10% */
transform: scaleX(2); /* double width */
/* Rotate */
transform: rotate(45deg);
transform: rotate(-90deg);
/* Skew */
transform: skewX(15deg);
/* Combine */
transform: translateY(-4px) scale(1.02);
}@keyframes — full animations
For more complex animations that repeat or have multiple stages:
css
/* Define the animation */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Apply it */
.spinner {
animation: spin 1s linear infinite;
}
.card {
animation: fadeIn 0.4s ease-out forwards;
/* forwards — stays in the final state */
}css
💬
This exact code is used in the Memory Game! perspective sets the observer distance for the 3D effect, backface-visibility: hidden hides the back when it's facing away from us.
Only animate transform and opacity — these properties are handled by the GPU without recalculating layout. Animating width, height, top, left is slow and causes jank.