Płynne przejście zdjęcia na inne po określonym czasie?

pytanie zadane 28 marca 2019 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

Witam, ja w temacie poszukuję skryptu który pozwoli mi na płynną (Jedno delikatnie zanika a drugie się pojawia) zamianę zdjęć (na stronie jest obrazek 1.jpg i po np 5 sekundach ma się zmienić na 2.jpg) najlepiej jak by było zapętlone, aby w koło się zamieniało.

Jakieś słowa kluczowe?

3 odpowiedzi

odpowiedź 29 marca 2019 przez Chess Szeryf (76,710 p.)
wybrane 31 marca 2019 przez Hardwell

Najlepsza

body {
	background: olive;
}

.tile1 {
	animation-name: tile_animate;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes tile_animate {
	
	0%, 5%, 10%, 15%, 20%, 25% {
		opacity: 0.0;
	}
	
	30% {
		opacity: 0.1111;
	}
	
	35% {
		opacity: 0.2222;
	}
	
	40% {
		opacity: 0.3333;
	}
	
	45% {
		opacity: 0.4444;
	}
	
	50% {
		opacity: 0.5555;
	}
	
	55% {
		opacity: 0.6666;
	}
	
	60% {
		opacity: 0.7777;
	}
	
	65% {
		opacity: 0.8888;
	}
	
	70% {
		opacity: 0.9999;
	}
	
	75%, 80%, 85%, 90%, 95%, 100% {
		opacity: 1.0;
	}
}

.tile1 {
	background-image: url('x1.png');
}

.tile2 {
	background-image: url('x2.png');
}

.tile1, .tile2 {
	width: 100px;
	height: 100px;
	position: absolute;
}

.container {
	position: relative;
	margin-top: 200px;
}

<body>
<!-- Pozycja absolutna i relatywna chyba klasyk. -->
<div class="container">
	<div class="tile2"></div>
	<div class="tile1"></div>
</div>

</body>

Jeśli chcesz zmienić długość czasu na starcie i na finiszu animacji to musisz zmienić te wartości pod @keyframes, chyba że masz inny sposób na napisanie tego.

Jak działa ta animacja? A no tak:

Właściwość animation-duration jest ustawiona na 8 sekund, więc...

25/100 * 8/1 = 2

0/100 = 0

2 - 0 = 2 sekundy (pierwsza część animacji - 2 sekundy stoi w miejscu)

70/100 * 8/1 = 5.6

30/100 * 8/1 = 2.4

5.6 - 2.4 = 3.2 sekundy (druga część animacji - 3.2 sekundy w "ruchu")

100/100 * 8/1 = 8

75/100 * 8/1 = 6

8 - 6 = 2 sekundy (trzecia część animacji - 2 sekundy stoi w miejscu)