Animating Example
/* Basic styles for the body to ensure full screen coverage */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* Container for the animation */
.animation-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/* Styles for the animated box */
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: moveBox 5s infinite;
}
/* Keyframes for the animation */
@keyframes moveBox {
0% { transform: translateX(0); }
50% { transform: translateX(300px); }
100% { transform: translateX(0); }
}
scripts.js
javascript
// Log to the console when the DOM content is fully loaded
document.addEventListener('DOMContentLoaded', function() {
console.log('Animation script loaded and running');
});
File Tree
root/
├── index.html
├── styles.css
└── scripts.js
ليست هناك تعليقات
إرسال تعليق