This learning unit is about learning a new skill. I decided to work on CSS animations and made a page on the basic transitions and transformations you can do to divs. This page is more of a reference guide summarizing what I learned from online resources rather than a visual solution but I feel like I got the basics down. I would like to make a reference to w3schools as I used a lot of the text from the site. Also, I want to reference the site called CSS tricks for animation count down as I used a tutorial to learn how the code works.
You can see this document as process work where I tested a bunch of code I found online in a way that would make sense to me in the future. I do have to admit that I am probably the only person who would be able to make sense of it without context as a lot of the explanations are done with notes in the code itself if I felt it was necessary. It also has the basic functions down so I only have to use the Inspect browser function to see what I did to reuse the code in the future.
As for the actual content, it includes:
- Transitions – which affects the speed at which animations happen.
- Animations – this is the function that actually makes the animation happen
- 2D/3D Transforms – which is a overview of how the animations would work and look like
- Perspective – to show how one would change the perspective of a object with code
- SVG (Scalable Vector Graphic) – a file type for vector images that allows you to directly affect the code. It is also commonly used in animations as it is one of the smallest file sizes.
- SVG Animation – followed an online tutorial to learn more about the code. This animation is done by moving the nodes you use to make the image. Thus you need to ensure you have the same number of nodes in every image to make the animation work.
One thing I learned through this is the amount of effort that goes into making animations accessible across different browsers. The code I wrote works in Chrome. Browser support is specific syntax that allows your site animations to work on multiple browsers. To learn more about Browser Support click here.
To show the animations I used Xbox live screen recording to make the video.
Click here to download the original practice file.
References
CSS-Tricks, 2015. A
Guide to SVG Animations (SMIL). [Online]
Available at: https://css-tricks.com/guide-svg-animations-smil/
[Accessed 21 10 2019].
W3Schools,
2019. CSS 2D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_2dtransforms.asp
[Accessed 21 10 2019].
W3Schools,
2019. CSS 3D Transforms. [Online]
Available at: https://www.w3schools.com/css/css3_3dtransforms.asp
[Accessed 21 10 2019].
W3Schools,
2019. CSS Animations. [Online]
Available at: https://www.w3schools.com/css/css3_animations.asp
[Accessed 21 10 20191].