Animation & Transform

Transform, Filters & Transitions

Voor de opdracht Transform, Filters and Transitions heb ik een animatie gemaakt van het Snapchat-logo. Als je eroverheen hoverd draait het logo rond en veranderen de grijstinten in de echte kleuren van het originele logo. Deze animatie past bij deze opdracht omdat is gebruik heb gemaakt van alle drie de elementen die je kunt gebruiken:
- Tranformeren (draaien)
- Filters (van grijstinten naar kleur)
- Transition (transition: all 0.5s ease, transform 1.2s; (de transitie van hoe lang het duurt voordat de animatie begint)).

Animation

Dit is mijn uitwerking van de Animation opdracht. In het begin vond ik het toch wel lastig. Het was toch wel een nieuw voor mij, maar ik sta natuurlijk altijd open om nieuwe dingen te leren (anders ga ik niet naar school, duuh)!
Ik heb dus eerst een beetje onderzoek moeten doen voordat ik echt snapte waar het over ging. Toen ik eenmaal wist wat het was ben ik verder op zoek gegaan en gekeken naar wat ik leuke kleine animaties vond. Uiteindelijk vond ik op www.w3shools.com wat voorbeelden. Een daarvan vond ik prima om zelf nog een beetje mooier te maken. Ook heb ik nog samen met Kenny Nguyen gekeken hoe we dit wat beter/mooier konden maken, en hoe we het voor elkaar konden krijgen om het blokje constant rond te laten gaan (hij stopte in het voorbeeld namelijk na één keer heen en weer bewegen). Dit hebben we uiteindelijk opgelost door deze regel code aan de class toe te voegen: animation-iteration-count: infinite;.
Dus, zie hier. Mijn eerste CSS Animatie!