Create CSS Animations Easily with this Chrome Extension
- December 22, 2023
- Posted by: MainInstructor
- Category: Go
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703289099_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Create CSS Animations Easily with this Chrome Extension
Hey everyone Garry Simon of course a trove so today we’re gonna take a quick look at a really cool tool that I just discovered and it allows you to very quickly and easily create CSS animations for your web layouts or your app layouts so you can access it over here at
Keyframes dot app one of these snazzy new relatively new domain extensions and basically I you can either choose to use this app like a web app version of the editor and it just gives you this little hello graphic but the real use case in my opinion is the free Chrome extension
And if you click this it’ll say you know for me it’s already added you’ll want to add that and it shows up right here in the upper right hand corner so after you have that added I’m going to show you now how you actually use this app and
We’re gonna do it in two different ways we’re going to do it with our own very quick project from scratch and then also I’ll show you how to use it on any existing page really so let’s go ahead I’m gonna go to a visual studio code
Here and I have a blank project open and we’re gonna create a new index.html file and by the way I’m not gonna say here typing out everything do I want this to be relatively quick I’ll just get this larger so you can see it and then also
Will have a main CSS file and here just in the top I’m going to refer to my other monitor on my desk here and just gonna copy just some quick lines right here all right so if hit control BT great that sidebar we’ll see I’ve added a link
Rel to the main dot CSS file that we just created and also montserrat we have a google web font here added so it doesn’t look like crap so in here in the actual HTML section again I’m just going to copy and paste some really simple
HTML so we have a div class of a container got a div inside here we have h1 my awesome headline we have a paragraph with with some lorem ipsum text and then a call to action button with a class of CTA so now go into our main desk CSS file
Once again I’m going to just go ahead and copy and paste just some quick roll sets here so we have a body with the background color with our font here and a font family our container just some h1 paragraph and our CTA button here so if
I save this and bring back the sidebar with control B and right click on index.html I’m going to open with live server here if you don’t have that added I but I believe it already comes shipped with it you can just reveal and Explorer and double click on an index dot HTML so
When we open this with the live flap I already have another one open one second here let’s see here manage extension I’m just going to go ahead and close out the other instance there and try this again technical difficulties open with live server there we go so this is what we’re looking at
Let me increase this just a bit alright so the use case in this comes when you say ok well I’ve already you know I have the static version of my interface here and I want to add animation to it now traditionally you would go back to your
Main CSS file and you would start adding and writing your your-your-your keyframe animations and everything that you want on you would go back and forth and whatever the usefulness in this tool now however comes when you can simply use the keyframes icon right here you click
On this and it’ll say click on any element that you want to animate so it’s gonna hover it’s kind of like the code inspector really of Chrome and so you hover over what you want to animate we’ll see let’s say for instance we wanted this this section right here the
Myosin headline to paragraph and the the button all to come in and kind of just fade in well that’s why I added that that empty div right there because that gives us ax to this container right here so if we click on it will now see that we have
This area on the right hand side where we have our CSS properties but we also have this timeline down here so it’s very handy as you can imagine so the way this works is I you click on the timeline to add a step so by default a
Step is added at 0% and you start setting your different properties so it’s a set up in to transform colors and font size and spacing border is in shadows so to actually work with transform will see by default it looks like these are already have values in them but they’re really just placeholder
Values so there’s no values by default now I found that there was kind of an issue when I’m creating these keyframes that it was putting xx in the rotate field so I’m always going to put that to zero next let’s say again we want it to
Come in from the top and from a zero opacity and fade in and fade in and down so what we would do is we would translate y as that’s on the y axis up and down and we would say something like maybe we can use percentage values or we
Could use pixels and we’ll just say negative ten percent so now we can see it’s already kind of came up there it’s changes to 15 percent so it’ll update live on the fly and if we go to colors and font we have access to opacity so
We’ll put a zero opacity right there so now as somebody’s calling me if we go ahead let’s say to the very end at a hundred percent and left click we’ve now added a keyframe so now we can adjust this let’s bring back the opacity to one
All right now it’s still at the top so we have to change to translate Y position simply to zero all right so now we can see we have some other simple properties animation duration iterations delay in timing these are just referring to CSS properties and their associated values we obviously wouldn’t want the
Iterations to be infinite as in don’t want it to loop so we can just tank changes to a different property and forwards is a CSS values for the the iterations so that it only happens once three seconds is also probably going to be long but if we hit start anyhow just
To look at this you can see it’s now showing us live in the browser what this animation looks like so let’s just change this to maybe one second you can also change the timing let’s try ease hit start okay much better now it may not appear very smooth
Because of the framerate of this video but it does look pretty much ideal in terms of how I would want it so now at this point if you’re happy with the animation that you’ve have you can click on show output CSS and here is the code
That you would add so in our case let’s say we want to add the actual animation property and this is the element that we want to animate which happens to be that empty div or it’s not empty rather but it’s just a div without a class or a
Name so what we would do is go back here and again the one we want to animate is this div right here alright so we could simply say container div and paste this your animation you can go ahead and change that to a custom
Name if you want go back to our CSS and then copy all of that the actual keyframes row just like that hit save go back and now if we refresh now it’s permanently baked into our interface so then let’s say for instance alright you
Add that you can do it again if you want so click on this click on the element you want to animate we’ll say the button alright maybe we want the button to kind of slide in from the left and maybe we’ll have a multi-step keyframe animation here so let’s do that
We’ll say translate X will on at 0% mm negative 30 pixels so we were just starting here from the left we’ll take our opacity to zero all right that’s cool and then we’ll go ahead and maybe around oh by the way it’s make the rotate zero because there’s an issue
There 76 percent or so we’ll say let’s push it over 15 pixels or maybe just 10 pixels and we’ll make the opacity at this point 0.76 and then we’ll come out here to the very end at 100% this will be 0 and this will be 1 all right this
Will also be a delay of about 0.3 seconds we’ll use ease for timing and then animation duration let’s make it kind of quick maybe 0.7 also this will be for words start animation all right so it’s not going to show you with the original animations so let’s go to show
Output CSS we’ll copy this this time we’re going to make sure we change the animation property the animation name actually so we want to add this on to our CTA so this is going to be your animation – we’ll just say we’ll go back copy this paste this your animation to save it
Alright so now let’s refresh now it’s showing up though here I write there so it doesn’t look correct so we’re just gonna have to adjust it real quick so that the opacity by default is set to zero on this element there we go much much better all right so of course you
Can do this on any live website that you currently have access to or you can access in your browser so for instance if we go to elegant themes calm let’s say for instance die you want to see what it would look like if they animated this little window right here this
Modulus this little pop-up well what we can do is click on this click on the element you want to animate and let’s just do this again just for a little bit more muscle memory so what we can do is I let’s say let’s try to skew it as well
So we’re gonna put 0 and rotation scale let’s set 2.7 and maybe 0.8 there we go it should see skew X let’s try 25 deg or yeah maybe negative actually you know what let’s do 25 degrees that way there we go in this qy and then also opacity will be
0 great now let’s add 100% just for the fun of it and we’ll put in scale 1 this is going to be 0 degrees and we don’t see it yet because the opacity was I yeah at 0 still so now one second for words little Happy’s awesome stuff there you
Go alright so hopefully you found that useful I know for myself I will probably use this tool when I go forward and add animations to any layouts that I create in the future alright so as people are trying to call me make sure you subscribe here if you haven’t yet most
People who watch my videos don’t subscribe and that’s probably a standard thing it’s like 80% are non subscribers who watch my stuff subscribe there leave a comment and I’ll see you guys real soon all right good bye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Good job bro!
Did they get rid of the extension
Nice video but in 4:25 it kind of felt like f*** off attitude
This is awesome, especially for someone still getting more comfortable w CSS 🙌🏻
inhave tried this and the extension is quite complicated it doesnt work as shown currently
this is the most useful thing video i have seen in a while
cant seem to find the extension looks like they removed it
What happened to the extension, I cannot find on Chrome Store.
Tnx man
Was going ton leave a lime but the number finishes with 69 tough
I can not find this extension
how to make animation start only after certain amount of scroll ?
great man❤️
This makes things soooooo much easier. Love your videos Gary. I can't believe you uploaded this in 2018 and I've only just seen it today
You Buddy Just saved my life. May God Bless you.
Thanks
This looks super useful but I can't seem the find this extension. Have they deleted it ?
is the chrome-extension still availible? Can't find it as an extesion… website…yes… extension…no…
Thank you, what a nice extension, sure It makes things easier
Starts @4:00
for a moment i thought someone was calling me.
Very helpful
Literally every video with Gary Simon: "And here we have our link to Montserrat which is a Google font"
Great sir
sure girl friend calling you 😉 good luck ty for this v ider
Loved this video
Any time I watch your courses, learn something unique. Good job.
really helpfull
Thank you for sharing this!