[:en]CSS animation[:nl]CSS animatie[:]

[:en]I’m experimenting with CSS animations. I’m making a Malevich-like animation. For this I have made a SVG design in a drawing program. Then transfer all signed blocks to CSS. This is a lot of work, maybe next time I can see if I can work directly from CSS. I put the sizes in pixels and I made the positions of each block. In the future, I think it’s easier to set the percentages so that the animation does not go outside the viewport. I went on to experiment by animating the positioning of the blocks. The blocks were first completely animated and then relative to each other, thus shifting the entire composition. This creates a complex animation in an animation.[:nl]Ik ben met CSS animaties aan het experimenteren. Ik maak een Malevich-achtige animatie. Hiervoor heb ik een SVG ontwerp gemaakt in een tekenprogramma. Daarna alle getekende blokken overgezet naar CSS. Dit is best veel werk, volgende keer misschien kijken of ik direct vanuit CSS kan werken. De maten heb ik in pixels gezet en de posities van elke blok heb ik absoluut gemaakt. In het vervolg is het handiger denk ik om de maten in procenten te zetten zodat de animatie niet buiten de viewport gaat. 

Ik ben verder gaan experimenteren door de positionering van de blokken te animeren. De blokken zijn eerst absoluut en daarna relatief ten opzichte van elkaar geanimeerd waardoor de hele compositie verschuift. Dit zorgt voor een complexe animatie in een animatie.

Verder experimenteren

Ik heb redelijk veel code moeten tikken omdat ik ieder blok apart heb getekend. Het is ook interessant om te kijken of ik blokken relatief t.o.v. elkaar kan maken zodat de grootte automatisch berekend wordt. Daarbij is het interessant om een container blok te animeren zodat de elementen erin automatisch mee geanimeerd worden. Ook is het interessant om kleur te gaan animeren en de vorm door bijvoorbeeld van rechthoek naar ellips te gaan.

Het is ook interessant om te kijken of ik i.p.v. blokken in de ruimte een raster kan animeren. Dus dat ik i.p.v. een Malevich een Mondriaan animeer. Hiervoor kan ik flexibele blokken gebruiken waardoor het raster steeds verschuift.[:]