Animacje CSS

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2573 razy

CSS rozwinął się do tego stopnia, że można w nim tworzyć animacje przejścia jednego stylu w drugi. Jest to możliwe dzięki zastosowaniu trzech nowych atrybutów:

Oto prosty przykład zastosowania dla styli filter i border-radius elementu img:

<style> img.gray { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition-property: filter, border-radius; transition-duration: 1s; transition-timing-function: linear; display:block; margin: auto; width: 50%; height: 50%; border: 1px solid #aaaaaa; border-radius: 5px; padding: 5px; box-shadow: 0 0 10px 10px rgba(200, 200, 200, 0.5); } img.gray:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); border-radius: 50%; } </style> <img class="gray" src="rysunki/Panorama.jpg" alt="panorama"/>

Efekt działania powyższego kodu:

panorama