FABERLIC
Немного о коде
На показ каждого слайдера выделяется 10 секунд, а всего их 4. Поэтому общая продолжительность анимации составляет 40 секунд. Это указывается в строках animation: slideanim 40s infinite и animation: zoom 40s infinite
Для каждого слайда отдельно устанавливается задержка, это классы .slideshow-item:nth-child(1), .slideshow-item:nth-child(1) img и т.д.
Значения в анимации slideanim устанавливаются так:
12.5% {opacity: 1} - 100 / 4 (кол-во слайдов) / 2, при котором переходим с полной прозрачности в видимую область
25% {opacity: 1} - 100 / 4 (кол-во слайдов), при котором показываем непрозрачный слайд
37.5% {opacity: 0} - складываем первые два значения для перехода опять в прозрачность
Значения в анимации zoom устанавливаются так:
50% {transform: scale(1.3)} - 100 / 4 (кол-во слайдов) x 2, при котором увеличиваем фотографию
Например, для 7-ми слайдов эти анимации будут выглядеть так:
@keyframes slideanim { 7.15%{ opacity: 1; } 14.3%{ opacity: 1; } 21.5%{ opacity: 0; } } @keyframes zoom { 28.5%{ transform: scale(1.3); } }
