kitty doing a cartwheel
.kitty {
width: 100px;
height: 100px;
background-image: url('kitty_sprite.png');
animation: cartwheel 1s steps(6) infinite;
}
@keyframes cartwheel {
0% { background-position: 0 0; }
100% { background-position: -600px 0; }
}
// Optional: Preload the kitty sprite image
var img = new Image();
img.src = 'kitty_sprite.png';
// Add the kitty element to the page
var kittyElement = document.createElement('div');
kittyElement.className = 'kitty';
document.body.appendChild(kittyElement);
.kitty {
width: 100px;
height: 100px;
background-image: url('kitty_sprite.png');
}
.cartwheel-animation {
animation: cartwheel 1s steps(6) forwards;
}
.kitty {
width: 100px;
height: 100px;
background-image: url('kitty_sprite.png');
background-repeat: no-repeat;
transition: transform 0.3s ease-in-out;
}
.cartwheel-animation {
animation: cartwheel 1s steps(6) forwards;
animation-timing-function: steps(6);
transform-origin: center center;
}
@keyframes cartwheel {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
var cartwheelButton = document.getElementById('cartwheelButton');
var kittyElement = document.querySelector('.kitty');
cartwheelButton.addEventListener('click', function() {
kittyElement.classList.add('cartwheel-animation');
setTimeout(function() {
kittyElement.classList.remove('cartwheel-animation');
}, 1000); // Remove the 'cartwheel-animation' class after 1 second
});
var cartwheelButton = document.getElementById('cartwheelButton');
var kittyElement = document.querySelector('.kitty');
cartwheelButton.addEventListener('click', function() {
// Add a random class for variety in cartwheel poses
var randomClass = 'pose-' + getRandomPose();
kittyElement.classList.add(randomClass);
kittyElement.classList.add('cartwheel-animation');
setTimeout(function() {
kittyElement.classList.remove(randomClass);
kittyElement.classList.remove('cartwheel-animation');
}, 1000); // Remove classes after 1 second
});
// Function to generate a random pose number between 1 and 6
function getRandomPose() {
return Math.floor(Math.random() * 6) + 1;
}
https://youtu.be/TP4Woi8d0VE
ReplyDelete