Падение сверху
Первая фотография в этом примере используется 2 раза, чтобы определить ее пропорции
Этот вариант можно протестировать на codepen
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="photo-container-1"> <div class="photo-0"> <img src="photo-1.jpg" /> </div> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.photo-container-1 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-1 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-1 .photo-0 { position: relative; z-index: -2; } .photo-container-1 .photo-1 { position: absolute; top:-100%; animation: fromtop 10s linear 5s infinite; } .photo-container-1 .photo-2 { position: absolute; top:-100%; animation: fromtop 10s linear infinite; } @keyframes fromtop { 0% { top: -100%; } 4% { top: 0; } 5% { top: -20px; } 6% { top: 0; } 49.99999% { top: 0; z-index: 1; } 50% { top: 0; z-index: -1; } 100% { top: 0; z-index: -1; } } |
Поворот с прозрачностью
Этот вариант можно протестировать на codepen
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-2"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.photo-container-2 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-2 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-2 .photo-1 { position: relative; animation: rotate 10s linear 5s infinite; } .photo-container-2 .photo-2 { position: absolute; top: 0; animation: rotate 10s linear infinite; } @keyframes rotate { 0% { opacity: 1; transform: rotate(0) scale(1); } 50% { transform: rotate(0) scale(1); opacity: 1; } 59.99999% { transform: rotate(45deg) scale(3); opacity: 0; z-index: 1; } 60% { opacity: 0; z-index: -1; } 100% { opacity: 1; } } |
Увеличение
Этот вариант можно протестировать на codepen
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-3"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.photo-container-3 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-3 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-3 .photo-1 { position: relative; animation: scale 10s linear 5s infinite; overflow: hidden; } .photo-container-3 .photo-2 { position: absolute; overflow: hidden; top: 0; animation: scale 10s linear infinite; } @keyframes scale { 0% { transform: scale(0); border-radius: 50%; } 10% { transform: scale(1); border-radius: 50%; } 15% { border-radius: 0; } 49.99999% { z-index: 1; } 50% { z-index: -1; } 100% { transform: scale(1); z-index: -1; border-radius: 0; } } |
Горизонтальное вращение
Для вертикального нужно заменить rotateY на rotateX
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-4"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.photo-container-4 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; } .photo-container-4 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-4 .photo-1 { position: relative; animation: rotateY1 10s linear infinite; backface-visibility: hidden; } .photo-container-4 .photo-2 { position: absolute; top: 0; animation: rotateY2 10s linear infinite; backface-visibility: hidden; } @keyframes rotateY1 { 0% { transform: rotateY(-180deg); } 40% { transform: rotateY(-180deg); } 50% { transform: rotateY(0); } 90% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } } @keyframes rotateY2 { 0% { transform: rotateY(0); } 40% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } |
Фильтр с прозрачностью
Смена фотографий через фильтр с добавлением прозрачности. В примере используется brightness, но можно выбрать и любой другой фильтр
|
1 2 3 4 5 6 7 8 |
<div class="photo-container-5"> <div class="photo-1"> <img src="photo-1.jpg" /> </div> <div class="photo-2"> <img src="photo-2.jpg" /> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.photo-container-5 { max-width: 380px; width: 100%; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-5 img { width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .photo-container-5 .photo-1 { position: relative; animation: brightness 10s linear 5s infinite; } .photo-container-5 .photo-2 { position: absolute; top: 0; animation: brightness 10s linear infinite; } @keyframes brightness { 0% { opacity: 1; } 54% { filter: none; } 58% { opacity: 1; } 59.99999% { filter: brightness(10); z-index: 1; } 60% { opacity: 0; z-index: -1; } } |
Привет. Покажите на одном примере, как запустить вашу анимацию при hover. Что никак не выходит.
На 3 примере:
Удаляем вызов анимации
и
и добавляем:
.photo-container-3:hover .photo-1 { animation: scale 10s linear infinite; z-index: 1; } .photo-container-3:hover .photo-2 { animation: scale 10s linear 5s infinite; }Еще 1 вариант - это использовать animation-play-state
Для классов
.photo-container-3 .photo-1 и .photo-container-3 .photo-2 добавляем
и запускаем их по ховеру:
.photo-container-3:hover .photo-1 { animation-play-state: running; } .photo-container-3:hover .photo-2 { animation-play-state: running; }Спасибо. Понятно. Тут дело оказывается ещё и в последовательности правил. Не нашёл ещё как убрать задержку. Так как получается при наведении она ждёт несколько секунд. Я делаю 4-ый пример.
Я вот воспользовался последним вариантом, но проблема в том, что мне нужно остановить цикл смены изображений и зафиксироваться на втором слайде, но никак не пойму как это можно сделать ?
Т.е. сменить 1 раз фото и все?
Если так, то заменяем классы на:
.photo-container-5 .photo-1 { position: relative; } .photo-container-5 .photo-2 { position: absolute; top: 0; animation: brightness 10s linear 1; } @keyframes brightness { 0% { opacity: 0; } 90% { opacity: 0; filter: none } 95% { filter: brightness(10); } 100% { opacity: 1; } }Только в этот момент фотка может находиться за пределами экрана.
Это то, что было нужно ! спасибо !