IN DEZE HANDLEIDING:
CSS Transitions and Transforms voor beginners
In dit bericht maak je kennis met CSS Transitions en Transforms voor beginners. Wanneer u deze eigenschappen samen gebruikt, kunt u eenvoudige animaties maken en waardevolle interactie en visuele feedback voor uw gebruikers toevoegen.
Houd er rekening mee dat u elke vorm van beweging aan uw project toevoegt om het eenvoudig, subtiel en consistent te houden. De beweging die u creëert moet betekenis overbrengen, altijd versterkend zijn en niet afleiden van de interactie voor uw gebruikers.
Dus wat zijn transformaties en transities? Op hun meest basale niveau verplaatsen of veranderen transformaties het uiterlijk van een element, terwijl overgangen ervoor zorgen dat het element soepel en geleidelijk van de ene toestand naar de andere verandert.
CSS Transitions introductie
Laten we beginnen met CSS-overgangen. Overgangen zijn het vet in het wiel van CSS-transformaties. Zonder een transitie zou een element dat wordt getransformeerd abrupt van de ene toestand naar de andere veranderen. Door een transitie toe te passen, kunt u de verandering beheersen, waardoor deze soepel en geleidelijk verloopt.
Beweeg hieronder:
See the Pen With and Without Transition by Rachel Cope (@rachelcope) on CodePen.
In dit bericht gebruik ik overgangen in combinatie met transformaties. Overgangen kunnen echter ook elders worden gebruikt waar elementen van de ene stijl naar de andere veranderen (bijvoorbeeld wanneer een knop van kleur verandert tijdens het zweven).
Er zijn twee eigenschappen vereist om de transitie van kracht te laten worden:
- transition-property
- transition-duration
De transition-property specificeert de CSS-eigenschap waarop de transitie zal worden toegepast. U kunt een overgang toepassen op een individuele eigenschap (bijvoorbeeld achtergrondkleur of transformatie) of op alle eigenschappen in de regelset (dat wil zeggen, allemaal).
De eigenschap transition-duration specificeert de tijdspanne van de transitie. U kunt opgeven in seconden of milliseconden.
Voorbeelden van transition
Voorbeelden van transition:
See the Pen Translation Delay by Rachel Cope (@rachelcope) on CodePen.
CSS-transform: introductie
Nu we hebben besproken hoe we vloeiende en geleidelijke overgangen kunnen maken, gaan we kijken naar CSS-transformaties: hoe we een element van de ene staat naar de andere kunnen laten veranderen. Met de eigenschap CSS-transformatie kunt u elementen roteren, verplaatsen, scheeftrekken en schalen. (Dit bericht gaat alleen over 2D-transformaties, maar houd ons in de gaten voor toekomstige blogposts over 3D-transformaties.)
Transformaties worden geactiveerd wanneer een element van status verandert, zoals bij muisbeweging of muisklik. De voorbeelden in dit bericht demonstreren transformaties bij muisbeweging.
Voor de eenvoud gebruik ik in mijn voorbeelden alleen de versies zonder voorvoegsel. Het is echter mogelijk dat u voorvoegsels wilt toevoegen om ervoor te zorgen dat het in moderne browsers werkt.
Voorbeeld Transform
See the Pen CSS Scale Transition by Graham Clark (@Cheesetoast) on CodePen.
schaal / scale
Met de schaalwaarde kunt u de grootte van een element vergroten of verkleinen.
De waarde 2 zou de grootte bijvoorbeeld transformeren naar 2 keer de oorspronkelijke grootte. De waarde 0,5 zou de grootte transformeren naar de helft van de oorspronkelijke grootte.
See the Pen Transform: Scale by Rachel Cope (@rachelcope) on CodePen.
U kunt een element schalen door parameters in te stellen voor de breedte (X-as) of hoogte (Y-as). Transformeer bijvoorbeeld: scaleX(2).
Of gebruik de afkorting scale() om beide assen tegelijkertijd te schalen: transform: scale(2);.
Of definieer ze onafhankelijk van elkaar: transform: scale(2, 3);
Voorbeeld van CSS-syntaxis voor schaal
Vergeet niet een overgang toe te voegen! Zonder overgang toe te passen, zou het element abrupt van grootte veranderen. Voeg de overgang toe aan de bovenliggende selector (niet aan de hover-selector). Om de overgang soepel te laten verlopen bij zowel hover-over als hover-off.
div { transition: transform 1s; } div:hover { transform: scale(2); }draaien / rotate
Met de rotatiewaarde roteert het element een bepaald aantal graden met de klok mee of tegen de klok in. Een positieve waarde, zoals 90 graden, roteert het element met de klok mee, terwijl een negatieve waarde, zoals -90 graden, het element tegen de klok in draait.
See the Pen Transform Rotate Example by Rachel Cope (@rachelcope) on CodePen.
translate
De vertaalwaarde verplaatst een element naar links/rechts en omhoog/omlaag. De beweging is gebaseerd op de parameters die zijn opgegeven voor de X (horizontale) Y (verticale) assen.
Een positieve X-waarde verplaatst het element naar rechts, terwijl een negatieve X het element naar links verplaatst. Een positieve Y-waarde verplaatst het element naar beneden en een negatieve Y-waarde naar boven.
In dit voorbeeld verplaatst het element 20 pixels naar rechts en 20 pixels naar beneden.
See the Pen Transform: Translate by Rachel Cope (@rachelcope) on CodePen.
Overzicht functies CSS Transform
/* Functies door Arthur Wentzel */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
Overgangen combineren
U kunt meerdere transformaties combineren. Bijvoorbeeld:
/* Combinaties Arthur Wentzel */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);