First Introduction to Keyframes
I’ve held an interest in site animations for some time now. I always notice if I’m on a website that makes good use of animations — to me a well-placed fade in can be just as impactful as whatever other content is actually on the page. Of course I’m exaggerating a little bit, and also these cutesy animations certainly have a time and a place; for example a quick look at nytimes.com reveals little to no usage of animations. However, for something like a personal site or an artist page, I think that a few subtle animations can really go a long way.
My interest in animations along with my lack of knowledge about their creation has led me down some interesting paths. In some of my earlier attempts to implement animations in some React projects I brought in whole libraries in order to add in a small fade/slide in element. This worked just fine for me, but even at the time, I felt like I probably shouldn’t be bringing in too many outside sources for these animations. For one, I would certainly be installing code for a plethora of animations, most of which would go un-used. And secondly, I knew that if I wanted to have any more control over the customizations of these animations, I would probably need to create them myself — and that’s where Keyframes comes in!
Keyframes is essentially a process by which animations can be created in the css file. I wanted to create my own fade in animation using my very own 9 and a half fingers, and it turned out to be a pretty simple task. The first thing I needed to do was to create a add line in the css file, and write some code like the following:
I begin the declaration with “@keyframes” followed by the name of the animation. I could have called it anything, but I, and most others, would agree that it’s helpful to attempt to use a descriptive name. After that, I use percentages to declare what the values of the opacity property should be at two different stages in the animation — beginning and end. If I wanted I could add in more percentages if I wanted it to look a certain way during the middle of the animation, but for something this simple there is no need, since the browser will interpret this to ensure a smooth transition from fully transparent [opacity: 0], to fully opaque [opacity: 1]. At this point, there is really only one thing left for me to do, and that is to actually apply the animation that I’ve dutifully created.
The animation property on the element with ID “element-to-fade-in” can take a variety of different values, but most importantly I need to include the animation name, which of course is “fadeIn”, and the duration of the animation, which think looks best at .5s. I’ve also chosen to include an “ease-in” value on the animation. This is hardly noticeable for a half second-long animation, but it is always an option that serves to alter the speed at which the animation progresses from 0% complete to 100% complete. This value and the duration value can both be especially useful if I have multiple elements that I want to use the fadeIn animation, but I also would like for it to function a little bit differently with various elements without having to completely re-write the rule for each individual element.
I’ve heard previously that in general, the best practice to stick with when using keyframes is to try to only use the opacity, and the transform properties within the animation rules. I believe that this guideline may be in place because of performance issues, but I could be mistaken. Either way, a ton of creative animations can be written up in just a few lines of code with just these two properties, and it’s something that I am looking forward to exploring further as I continue to practice, and implement animations in my own projects.
