Video: css animations 1/3 2024
Als het uw doel is creatief informatie over te brengen op uw website voor weergave op de iPad of iPhone, is het gebruik van CSS 3 een van de beste opties voor het toevoegen van animaties en andere interactieve functies. CSS 3 introduceert drie belangrijke manieren om interactieve effecten en animaties te maken: transformaties, overgangen en animaties.
CSS 3 voegt veel nieuwe ontwerpfuncties toe, maar animatie is het meest opwindend. Met behulp van CSS 3 kun je tekens over het scherm laten lopen, vakken omdraaien en afbeeldingen vervagen. Om te laten zien hoe animatie werkt met CSS 3, toont deze figuur een eenvoudige bal die botst in een zwarte doos.
Er zijn geen afbeeldingen gebruikt om deze stuiterende balanimatie te maken. De bal zelf - en de actie die ervoor zorgt dat het lijkt alsof het van de bovenkant van het scherm naar de bodem en weer terug kaatst - werd allemaal bereikt met slechts een paar regels CSS 3-code.
Animaties zoals deze werken in de meeste populaire browsers die WebKit gebruiken, waaronder Safari (op Mac, Windows en iOS voor iPad / iPhone / iPad) en Chrome (op Mac, Windows en apparaten waarop Google's Android-besturingssysteem wordt uitgevoerd).
Je kunt veel geweldige ontwerpeffecten met deze functies maken, maar de meest interactieve sites die je vandaag op het web ziet, hebben naast HTML en CSS ook JavaScript nodig.
