Vloeiende CSS-aanpassingen door “transition”

Het is met CSS al tijden mogelijk om veranderingen te laten plaatsvinden bij bijvoorbeeld mouse-hover. Maar sinds CSS3 is het ook mogelijk om alle veranderingen in soepele ‘transities’ te laten plaatsvinden. In deze blog worden een paar voorbeelden gegeven van mogelijke CSS3-transities.

“Transition” toepassen in CSS3

Wanneer een transitie gebruikt moet worden in CSS, kan de volgende regel toegevoegd worden:

.element {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

transition-property: Hier komt het attribuut dat geanimeerd moet worden. Denk hierbij aan top, color, font-size, etc.

transition-duration: hier wordt de duur van de transitie aangegeven in seconden of milliseconden.

transition-timing-function: aan deze parameter kan meegegeven worden wat de snelheid van de transitie moet zijn. Bijvoorbeeld linear, ease-in-out, etc. Op de volgende site staan alle mogelijkheden: http://www.w3schools.com/css/css3_transitions.asp. Deze parameter is niet verplicht.

transition-delay: hiermee kan een vertraging meegegeven worden aan de transitie. Ook deze parameter is niet verplicht

Cross-browser transities

Voordat er voorbeelden genoemd worden, is het belangrijk om te weten dat “transition” niet (direct) voor alle browsers werkt. Om ervoor te zorgen dat de meeste browsers gebruik kunnen maken, moet er voor de transition een “prefix” geplaatst worden. Zie hieronder een voorbeeld hiervan:


-webkit-transition: background-color 500ms ease-out 1s; /* Chrome, Safari, nieuwe versies van Opera. */
-moz-transition: background-color 500ms ease-out 1s; /* Firefox */
-o-transition: background-color 500ms ease-out 1s; /* Oudere versies van Opera */
transition: background-color 500ms ease-out 1s;

Normaal moet voor microsoft de prefix “-ms-” toegevoegd worden, maar transition wordt vanaf IE10 ondersteund.

Transities in beweging

In CSS kunnen dom-elementen verplaatst worden door middel van top, bottom, left en right. Wanneer de één van deze attributen wordt gewijzigd, springt het dom-element naar een andere positie. Met transitie zullen deze ‘bewegingen’ soepel verlopen. Met de onderstaande code beweegt een vierkant blok 40 pixels naar beneden bij hover.


<div id=”moveObject”></div>

#moveObject {
  width: 50px;
  height: 50px;
  position: relative;
  display: block;
  background-color: red;
  top: 0px;
  left: 40px;
  -webkit-transition: top .2s;
  -moz-transition: top .2s;
  -o-transition: top .2s;
  transition: top .2s;
}

#moveObject:hover {
  top: 40px;
}

Transities met meerdere attributen

Om een transitie op meerdere attributen toe te passen, kunnen deze door middel van komma’s toegevoegd worden. Hieronder is het voorbeeld van het vorige hoofdstuk omgebouwd zodat de width én height van het blok aangepast worden.


<div id=”resizeObject”></div>

#resizeObject {
  width: 50px;
  height: 50px;
  display: block;
  background-color: red;
  -webkit-transition: width .2s, height .2s;
  -moz-transition: width .2s, height .2s;
  -o-transition: width .2s, height .2s;
  transition: width .2s, height .2s;
}

Transitie op alle attributen

Als laatste kan er met de transition-property “all” alle attributen geanimeerd worden. Dit is handig wanneer een dom-element in zijn geheel aangepast moet worden. Deze code ziet er dan als volgt uit:


-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;

 


Andere blogartikelen

  • Plugins maken in jQuery

    Geschreven door: op vrijdag 29 juni 2018

    Door zelf code die je vaak gebruikt om te zetten naar jQuery-plugins, zorg je ervoor dat je deze code eenvoudig kan toepassen in andere projecten en je je kan bezighouden met het maken van nieuwe func ...

    Bekijk het artikel »
  • Dependency injection

    Geschreven door: op dinsdag 26 juni 2018

    Vanuit een programmeer standpunt gezien is indeling van code een van de belangrijkste aspecten van het programmeren. Een rommelige werkomgeving maakt het lastig om te vinden wat je nodig hebt. Het opr ...

    Bekijk het artikel »
  • Databasetypen

    Geschreven door: op dinsdag 26 juni 2018

    Bij de meeste websites behoort een database waarin gegevens van de website worden opgeslagen. Er zijn verschillende manieren waarop deze gegevens kunnen worden bijgehouden. De meest gebruikte methode ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
partners-logo.jpg

mockup_tablet.png

Bedient u uw (potentiële) klant optimaal binnen het online koopproces? 

Vul de Online Scorecard in ›