Animate web page elements with Keyframes
It’s an extension, not @keyframes
“What if you could animate any element of a website according to your need with just a click of your mouse? Also, what if you could test that animation on a live website and then integrate the same CSS animation to your web project? And yes, all of this completely free and with tonnes of ease.”
Uh, above sentences look like I’m doing an advertisement of the product but I’m nowhere related to what I just tested and thought of sharing the same to you all. Let’s get it straight. There’s a Chrome extension named Keyframes that allows you to create CSS animations to a live or a web project by using the concept of key-framing. So, let’s see how to work with this and animate our next web project with ease!
What will I make?
This:
Not this:
What’s a key-frame animation❔
If you’re unsure about the word ‘key-frame’ which is used in film making, then keep your faith in your very own Wikipedia which says:
A key-frame in animation and film-making is a drawing that defines the starting and ending points of any smooth transition. The drawings are called “frames” because their position in time is measured in frames on a strip of film.
And for those who want to know about the @keyframes rule in our beloved CSS, visit the king of websites for web development. Enough, that was just to make sure what we’re actually dealing with.
What will I need? 🛠️
- H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
- Your already wonderful HTML and CSS skills.
- A text editor (I’ll be using VS Code just because for my last tutorial on CSS animation, I used well..I think VS Code is the one!)
- The Keyframes extension (great things comes with some limitations I guess, sadly it’s only available for Chrome and I literally downloaded the stupid Chrome browser for this!)
Shall we, key-frame?
I’ll assume you have a project folder with our usual index.html and style.css files. In our HTML, we’ll have the following:
- A
divcontainerclass - This
divwill have a<h1>heading, a paragraph tag<p> - And a
<a>anchor tag to make a button (a button with no<button>? Cool!)
Here’s our HTML:
And for the CSS? Just copy and paste the following code in which I just added the style we need to make it look better. There are no animations as of now as they will be done later when we’ll use the extension. Here it is:
You’ll get the exact screen shot which I attached above (obviously, without the animation). A container with an olive green background, a <h1> with some links and text formatting and a <a> converted to a button look via CSS. Dead simple.
Now, you have a static web page. You now think to add some kick-ass animations to some elements without worrying about what to code in CSS or JS. Enter Keyframes! Just follow the steps to make it awesome within minutes:
- Click on the extension icon. It works just like a code inspector which we typically find in the developer options of our browsers. It says to click on a item to animate. Let’s say, for instance, we want to animate the heading, paragraph and the button to come all together as shown above.
- To achieve that, just hover over to the rectangle where all the three elements (heading, paragraph and button) are covered under a transparent sheet and click on it. This is why we had that
<div>so that we can access thiscontainer.
3. You’ll now be presented with a CSS properties area where you can manually type in whatever values you like for almost any CSS animation property. You can see the animation happening live on your screen.
4. After you’re satisfied with what you’ve made you can now use the key-frame in the bottom which shows you the timeline in terms of percentage value where you can add a step or a point at which the animation should happen. For instance, you can add a step at 50%, then the values which you entered to make the container animate will start animating when the marker of the timeline reaches at that very step. This is cleverly based on the total time given for the animation to happen. This can be customized by altering the Animation Duration property on the timeline.
5. You can also change other parameters of the timeline like -
- The number of iterations you want
- The time delay in seconds
- Also, what should be the timing of the animation. My favorite is
ease-in-out
6. Now the real magic starts… when you’re finally done by creating multiple steps or changing other values according to your need you can now get the corresponding code of the animations you applied till now in form of CSS with just a click of a button! Get your corresponding CSS code by clicking on the Show output CSS button and there you have it! Copy that code to your editor and paste it accordingly!
To achieve the output I showed you above, I generated the following code:
Make sure to add the animation property in the a.button and .container div i.e. animation: btnAnimation .7s forwards .3s ease; and animation: divAnimation 1s forwards 0s ease; respectively with an initial opacity value set to 0 in a.button.
Where to next? 🤔
Why not try to mess with the Google website as I did? Yes, you can do the trick with almost any website and make changes according to your liking. It’s really a useful and fun extension to use. All hail to the developer Mitch Samuels. I just want it to be on Firefox too…
Also, if you think that this extension wasn’t worth your time, consider visiting the following link where you get more such extensions as an alternative to Keyframes:
Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst onTwitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
