Exploring Animations
October 11, 2015This week’s project was to learn the basics of CSS3 animations. Prior to this project I had no real experience with animation properties or keyframes, but after learning about them I feel like I have set myself up to use them in the future.
One of my favorite things that I learned about is how CSS3 animations can be used on scalable vector graphics or SVGs. Opening up an SVG in a text editor displays the code behind the SVG. A typical SVG contains numerous <path> elements. Just like our other elements, we can add classes and properties to <path> elements, allowing us to do some pretty cool things.
Aside from changing the properties like the fill color, we can also attach animations to our SVGs to really bring them to life. We can pick and choose which <path> element we want to animate, creating some pretty cool stuff.
Although I completed my project on animations, I still wouldn’t describe myself as an animations master. With @keyframes there’s just so much that’s possible. With that said I do plan to slowly introduce animations to some of my projects going forward. At the very least, I understand a lot more than I did at the start of the week.