Witam.

Mam oto animację w CSS dla dwóch obrazków:



I wszystko działa jak należy, lecz chciałbym by to płynnie się odbywało coś w stylu fade in i out. Ma ktoś jakiś pomysł

http://kukawski.pl/tmp/Slideshow/index.html - jak to nie to to opisz trochę dokładnie - najlepiej z przykładem, bo nie chcę "napracować się" bez sensu

Test

Tak jak jest tutaj u samej góry te 5 obrazków lecz one są zrobione tylko w CSS i są bardzo proste, chciałbym by to miało efekt płynnego przejścia.

Przy takim układzie zdjęć będzie to trochę ciężkie do zrobienia
No, ale do dzieła:
- podziel zdjęcia na połówki - 6 div-ów
--- zakładamy, że najeżdżasz na drugie zdjęcie
- wtedy w 3-divie masz 2 połówki zdjęć - lewa część środkowego(widoczne)(przezroczystość 0%) i prawą część 2 zdjęcia( niewidoczne )(przezroczystość 100%)
- jednocześnie zmieniasz przezroczystość połówkom, gdy osiągnie ono 50% zmieniasz przezroczystość "dalej"
- przezroczystość możesz w łatwy sposób zrobić sam lub możesz też skorzystać z biblioteki np. jQuery - jeśli wybierzesz pierwszą opcję i będziesz chciał to mogę Ci dać dalsze wskazówki

Jak coś to pytaj
Jak nie uda Ci się osiągnąć zamierzonego efektu to podaj nam to co zrobiłeś i ew. wtedy napiszę coś więcej - bez pokazania prób, nie licz na gotowca

innych materiałów nie chce mi się szukać ;]
Using CSS3 Transitions, Transforms and Animation

ps. jeszcze coby to było bezboleśnie przenikanie to obrazki daj w div'ach np. i po 2 takie same, z tą różnicą, że ten drugi jest wypozycjonowany nad pierwszym i oczywiście ukryty... gdy masz hover na danym div'ie pokazujesz obrazek z przezroczystością i tak aż będzie widoczny cały - skoro był ukryty, to z-index odpowiedni można było wcześniej ustawić... przy tym "algorytmie" łatwo to możesz zrobić albo za pomocą samego CSS [oczywiście nie we wszystkich przeglądarkach będzie to chodziło] albo za pomocą jQuery...

edit
tak teraz zwróciłem uwagę, że na tamtej stronie masz także przykłady z jQuery lub z samym CSS więc nie powinieneś mieć problemów