HTML

Voor meer details surf je naar css3_transition.

<button>
  This Button
  <span>is Cool.</span>
</button>
@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
* {
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFE8A3;
  font-family: 'Montserrat', sans-serif;
}
html, body {
  height: 100%;
}

button {
  border: 5px solid transparent;
  background: #AED6D1;
  color: #55706D;
  border-radius: 40px;
  padding: 15px 30px;
  overflow: hidden;
  width: 200px;
  transition: 
    all        1.2s,
    border     0.5s 1.2s,
    box-shadow 0.3s 1.5s;
  white-space: nowrap;
  text-indent: 23px;
  font-weight: bold;
}
  span {
    display: inline-block;
    transform: translateX(300px);
    font-weight: normal;
    opacity: 0;
    transition: 
      opacity 0.1s 0.5s,
      transform 0.4s 0.5s;
  }
  button:hover {
    text-indent: 0;
    background: #55706D;
    color: #FFE8A3;
    width: 250px;
    border: 10px solid #8DCCC4;
    box-shadow: 3px 3px 2px rgba(black, 0.15);
		}
    span {
      transform: translateX(0);
      opacity: 1;
    }

Wat zijn CSS-animaties?

Uitleg van w3schools

Als we CSS-animatie gaan gebruiken, moet u eerst een aantal keyframes maken voor de animatie. Keyframes houden bij welke stijlen het element op bepaalde tijden zal hebben.

De @keyframes Rule

Stap 1: De @keyframes regel zal de animatie geleidelijk veranderen van de huidige stijl van de nieuwe stijl op bepaalde tijden. Stap 2:Roep je animatie op aan een element zoals een div, h2, img, ...

De animation-duration eigenschap bepaalt hoe lang een animatie moet nemen om te voltooien. Voorbeeld: 2s of 2 seconden.

Het volgende voorbeeld gaan we de div van links naar rechts verplaatsen. Geef het div element de eigenschap position:relative mee.

Probeer nu eens het onderstaande na te maken, je hebt 5 stappen (0%, 25%, 50%, 75% en 100%). Tip: Verander de position waarde naar absolute!

Vertraging

De animation-delay eigenschap geeft een vertraging voor de start van een animatie.

Instellen hoe vaak een animatie zou moeten lopen

De animation-iteration-count eigenschap geeft het aantal keren dat een animatie moet worden uitgevoerd.

Het volgende voorbeeld wordt de waarde "oneindig" om de animatie zijn in eeuwigheid (waarde infinite).

De animation-direction eigenschap geeft aan of een animatie voorwaarts worden afgespeeld, achteruit of in afwisselende cycli.

De animatie-eigenschap direction kan de volgende waarden hebben:

  • normal - De animatie wordt gespeeld als normaal (vooruit). Dit is standaard
  • reverse - De animatie wordt afgespeeld achteruit (achterwaarts)
  • alternate - De animatie is naar voren gespeeld, daarna achteruit
  • alternate-reverse - De animatie wordt achterstevoren afgespeeld eerst, dan naar voren

Hieronder een voorbeeld van de waarde alternate

fill-mode

De animation-fill-mode eigenschap geeft een stijl voor het doel element wanneer de animatie niet speelt (voordat het begint, na het eindigt, of beide).

De animatie-fill-mode eigenschap kan de volgende waarden hebben:

  • none- Standaardwaarde. Animatie zal niet alle stijlen van toepassing op het element voor of na het wordt uitgevoerd
  • forwards - Het element van de stijl waarden die door de laatste keyframe is ingesteld behouden (afhankelijk van de animatie-richting en animatie-iteratie-count)
  • backwards - Het element van de stijl waarden die door de eerste keyframe is ingesteld te krijgen (afhankelijk van de animatie-richting), en bewaar deze in de animatie-vertragingstijd
  • both - De animatie de regels voor zowel vooruit als achteruit te volgen onder toepassing van het animatie-eigenschappen in beide richtingen

De tijd blijft op de laatste keyframe stilstaan.

De tijd blijft op de eerste keyframe stilstaan.

De tijd blijft op de eerste en de laatste keyframe stilstaan.

De animation-timing-function eigenschap geeft het snelheidsverloop van de animatie.

De animatie-timing-functie eigenschap kan de volgende waarden hebben:

  • ease - Geeft een animatie met een langzame start, dan snel, te beëindigen dan langzaam (dit is standaard)
  • linear - Geeft een animatie met dezelfde snelheid van begin tot eind
  • ease-in - Geeft een animatie met een langzame start
  • ease-out - Geeft een animatie met een langzame einde
  • ease-in-out - Geeft een animatie met een trage start en het einde
  • cubic-bezier(n,n,n,n) - Hiermee kunt u uw eigen waarden te definiëren in een kubieke-bezier functie

Je kan de aparte eigenschappen in korten naar:

div {
animation: example 5s linear 2s infinite alternate;
}			 
Surf naar deze link en maak volgende oefeningen na: https://designmodo.com/steps-css-animations



Uitleg background-position: steps
Uitleg twitter

Twitter:

Background-image "sprite.png"

Breedte en hoogte van 1 frame = 150 pixels

We schuiven de achtergrond naar links op via de eigenschap background-position.

Nog een voorbeeldje:

Meerdere animaties oproepen

Je kunt ook meerdere animaties tegelijk gebruiken:

div {
  animation: animatie_A 2s, animatie_B 1s 3s;
}

Hulpmiddel bij het animeren

Animate.css is een bibliotheek met kant-en-klare animaties voor gebruik in uw webprojecten. Geweldig voor nadruk, startpagina's, schuifregelaars en aandachtstrekkende hints. Ga naar https://animate.style.

Link het in de head-tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Basisgebruik

Voeg na het installeren van Animate.css de klasse animate__animated toe aan een element, samen met een van de animatienamen (vergeet het voorvoegsel animate__ niet!). Je kan het rechtstreeks in de HTML bij een gekozen element oproepen:

<h1 class="animate__animated animate__bounce">An animated element</h1>
>

Je kan het ook in de CSS ook oproepen:

.my-element {
  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

Sinds versie 4 maakt Animate.css gebruik van aangepaste eigenschappen (ook bekend als CSS-variabelen) om de duur, vertraging en iteracties van animaties te definiëren.

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}