Для создания эффекта «дрожания» изображения, а также эффектов «прыжка» и «шатания», можно воспользоваться CSS-анимациями или JavaScript. Рассмотрим оба подхода.
### CSS-анимации
1. **Дрожание:**
```css
@keyframes shake {
0% { transform: translate(0, 0); }
25% { transform: translate(-2px, 0); }
50% { transform: translate(2px, 0); }
75% { transform: translate(-2px, 0); }
100% { transform: translate(0, 0); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
```
2. **Прыжок:**
```css
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.jump {
animation: jump 0.5s ease-in-out;
}
```
3. **Шатание:**
```css
@keyframes sway {
0% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
100% { transform: rotate(-2deg); }
}
.sway {
animation: sway 0.5s ease-in-out infinite;
}
```
### Использование JavaScript для активации эффектов
Вы можете использовать JavaScript для добавления классов к элементу, чтобы активировать нужные эффекты. Вот пример, как это можно сделать:
```html
<button id="toggle">Показать/Скрыть</button>
<div id="image1" class="hidden">Изображение 1</div>
<div id="image2" class="hidden">Изображение 2</div>
<style>
.hidden {
display: none;
}
</style>
```
```javascript
document.getElementById('toggle').addEventListener('click', function() {
const img1 = document.getElementById('image1');
const img2 = document.getElementById('image2');
if (img1.classList.contains('hidden')) {
img1.classList.add('hidden');
img2.classList.remove('hidden');
// Добавить эффект "дрожания"
img2.classList.add('shake');
// Удаляем класс после окончания анимации
setTimeout(() => {
img2.classList.remove('shake');
}, 500); // Время должно совпадать с временем анимации
} else {
img1.classList.remove('hidden');
img2.classList.add('hidden');
}
});
```
### Примечание
- Убедитесь, что элементы, к которым вы добавляете классы, заранее скрыты с помощью CSS.
- Эти анимации могут быть изменены по длительности и значению параметров для достижения желаемого эффекта.
- Вы можете комбинировать различные эффекты, добавляя несколько классов, по желанию.
Таким образом, вы сможете реализовать эффекты дрожания, прыжка и шатания для изображения при его появлении!