Click-Based Class Switching
Modern web development often requires interactive elements that respond to user actions. JavaScript combined with CSS provides a powerful mechanism for altering element properties in real-time.
HTML structure
<!DOCTYPE html>
<html>
<head>
<title>Interactive Element Demo</title>
</head>
<body>
<div id="interactiveBox">Click to toggle appearance</div>
</body>
</html>
CSS definitions
#interactiveBox {
padding: 20px;
background-color: #3498db;
color: #ffffff;
cursor: pointer;
text-align: center;
}
#interactiveBox.active {
background-color: #e74c3c;
color: #000000;
}
JavaScript logic
const box = document.querySelector('#interactiveBox');
box.addEventListener('click', () => {
box.classList.toggle('active');
box.textContent = box.classList.contains('active')
? 'Activated!'
: 'Click to toggle appearance';
});
CSS Keyframe Animation
The @keyframes rule specifies how element properties should change over a duration. Time offsets can be defined as percentages or using from/to keywords.
fromis equivalent to0%tois equivalent to100%
@keyframes fadeIn {
0% { opacity: 0; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
Key animation propertise:
animation-timing-function: Defines acceleration (linear, ease, ease-in-out)animation-iteration-count: Number of cycles orinfinitedisplay: inline-block: Prevents element misalignment
Multiple Animation Combination
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Element</title>
<style type="text/css">
.movingBox {
position: absolute;
width: 120px;
height: 120px;
top: 60px;
left: 50px;
background-color: #3498db;
-moz-animation: verticalBounce 4s infinite, spinRotate 3s infinite;
-webkit-animation: verticalBounce 4s infinite, spinRotate 3s infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@-moz-keyframes verticalBounce {
50% { top: 180px; left: 250px; background-color: #2ecc71; }
}
@-webkit-keyframes verticalBounce {
50% { top: 180px; left: 250px; background-color: #2ecc71; }
}
@-moz-keyframes spinRotate {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spinRotate {
100% { -webkit-transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="movingBox"></div>
</body>
</html>
This example applies two simultaneous animations to a single element. The verticalBounce animation moves the box and changes its color at the midpoint, while spinRotate applies a full 360-degree rotation. Both animations run continuous with linear timing, creating a compound visual effect.