Table of Contents
CSS Transitions
CSS transitions allow you to smoothly animate changes in CSS properties over a specified duration.
Transition Properties
/* Individual properties */
transition-property: color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0.1s;
/* Shorthand */
transition: color 0.3s ease 0.1s;
/* Multiple properties */
transition: color 0.3s ease, background-color 0.5s linear;
/* All properties */
transition: all 0.3s ease;Timing Functions
transition-timing-function: linear; /* Constant speed */
transition-timing-function: ease; /* Default - slow start, fast, slow end */
transition-timing-function: ease-in; /* Slow start */
transition-timing-function: ease-out; /* Slow end */
transition-timing-function: ease-in-out; /* Slow start and end */
/* Custom cubic-bezier */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);Common Transition Examples
/* Button hover effect */
.button {
background-color: #007bff;
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.button:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Card hover effect */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}CSS Animations
CSS animations allow you to create more complex, multi-step animations using keyframes.
Keyframes
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Percentage-based keyframes */
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}Animation Properties
/* Individual properties */
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
/* Shorthand */
animation: slideIn 1s ease-out 0.5s infinite alternate forwards;Animation Values
/* Iteration count */
animation-iteration-count: 1; /* Once */
animation-iteration-count: 3; /* 3 times */
animation-iteration-count: infinite; /* Forever */
/* Direction */
animation-direction: normal; /* Default */
animation-direction: reverse; /* Backwards */
animation-direction: alternate; /* Forward then backward */
animation-direction: alternate-reverse;
/* Fill mode */
animation-fill-mode: none; /* Default */
animation-fill-mode: forwards; /* Keep final state */
animation-fill-mode: backwards; /* Apply first keyframe before start */
animation-fill-mode: both; /* Both forwards and backwards */Transform Properties
/* 2D Transforms */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(45deg);
transform: skew(30deg, 20deg);
/* 3D Transforms */
transform: translateZ(50px);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
/* Multiple transforms */
transform: translateX(50px) rotate(45deg) scale(1.2);Complete Animation Examples
<style>
/* Loading spinner */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Fade in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
/* Pulse animation */
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
}
}
.pulse-button {
background-color: #007bff;
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 50px;
cursor: pointer;
animation: pulse 2s infinite;
}
/* Slide in from left */
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Bounce animation */
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0, 0, 0);
}
40%, 43% {
transform: translate3d(0, -30px, 0);
}
70% {
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
/* Card flip animation */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.flip-card-front {
background-color: #007bff;
color: white;
}
.flip-card-back {
background-color: #28a745;
color: white;
transform: rotateY(180deg);
}
/* Typing animation */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: orange;
}
}
.typewriter {
overflow: hidden;
border-right: 0.15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0.15em;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
/* Interactive elements */
.animated-button {
background: linear-gradient(45deg, #007bff, #0056b3);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.animated-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.animated-button:hover::before {
left: 100%;
}
.animated-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
}
</style>
<div class="animation-examples">
<h2>CSS Animation Examples</h2>
<div class="example">
<h3>Loading Spinner</h3>
<div class="spinner"></div>
</div>
<div class="example fade-in">
<h3>Fade In Animation</h3>
<p>This content fades in when the page loads.</p>
</div>
<div class="example">
<h3>Pulse Button</h3>
<button class="pulse-button">Click Me!</button>
</div>
<div class="example">
<h3>Flip Card (Hover)</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h4>Front Side</h4>
</div>
<div class="flip-card-back">
<h4>Back Side</h4>
</div>
</div>
</div>
</div>
<div class="example">
<h3>Typewriter Effect</h3>
<div class="typewriter">
This text appears to be typed out!
</div>
</div>
<div class="example">
<h3>Animated Button</h3>
<button class="animated-button">Hover for Effect</button>
</div>
</div>