Для отображения фотографий из папки или контейнера с применением анимации к каждой из них можно воспользоваться JavaScript. Вот пример кода, который отображает изображения поочередно из папки "images" с применением анимации:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#image-container {
position: relative;
}
.image {
display: none;
position: absolute;
animation: fadeIn 1s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="image-container"></div>
<script>
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
const imageContainer = document.getElementById('image-container');
function displayImage() {
if (currentIndex >= images.length) {
currentIndex = 0;
}
const imageElement = document.createElement('img');
imageElement.src = 'images/' + images[currentIndex];
imageElement.classList.add('image');
imageElement.onload = () => {
imageContainer.appendChild(imageElement);
setTimeout(() => {
imageElement.style.display = 'block';
}, 100); // Delaying the display to apply the animation
setTimeout(() => {
imageElement.remove();
currentIndex++;
displayImage();
}, 5000); // Display each image for 5 seconds
};
}
displayImage();
</script>
</body>
</html>
```
Чтобы анимировать элементы HTML при помощи CSS или JavaScript, можно использовать свойства и методы анимации CSS или возможности библиотеки анимации, например, Animate.css для CSS или anime.js для JavaScript. Вот пример кода, который анимирует заголовок страницы при помощи CSS:
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slideIn {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
h1 {
animation: slideIn 1s ease-out;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
```
Этот код применит анимацию slideIn к заголовку страницы при её отображении. Для более сложных анимаций и управлениями ими рекомендуется использовать плагины или библиотеки для работы с анимациями.