Для добавления анимации появления фото на веб-странице с помощью CSS можно воспользоваться свойством @keyframes
для создания анимации и свойством animation
для применения этой анимации к элементу.
Вот пример CSS кода, который добавляет анимацию появления фото:
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .img-container { animation: fadeIn 1s ease-in-out; /* Применяем анимацию к элементу с классом .img-container */ }
В этом примере анимация fadeIn
будет плавно увеличивать прозрачность элемента от 0 до 1 за 1 секунду с эффектом замедления и ускорения на концах.
Чтобы применить анимацию к фото, поместите его элемент в контейнер с классом .img-container
, как показано ниже:
<div class="img-container"> <img src="путь_к_картинке.jpg" alt="Описание изображения"> </div>
Помните, что также важно указать начальное значение прозрачности (обычно 0) для изображения в начальном состоянии до начала анимации.
Это простой пример анимации появления фото с использованием CSS, вы можете настроить параметры анимации (например, длительность, функция времени) и стили элементов по вашему усмотрению, чтобы достичь желаемого эффекта.