Learn CSS animations in 15 minutes! 🎬

hey what's going on everybody today we're going to create some animations using CSS all right let's get started everybody we will create a development with an ID of box then within this box let's say the word hi let's go to our style sheet let's select our ID of box I will set the width to be 250 pixels the height to be 250 pixels I'll change the background color let's pick something red let's change the font size 13 em is fine then text align Center to use an animation we first need to create an animation using a keyframe rule that can be done with typing at keyframes then a unique animation name let's create an animation to slide this element from the right to the left the name will be slide left then add a set of curly braces within our keyframe there's a few possible values you have two from or a percent such as zero fifty 100 really any number we'll begin with a left translation for our element to end up in its resting position we will use from then add a set of curly braces just like we're adding CSS properties within our keyframe of from we will set the transform property to be an X translation translate x parentheses this can be an amount or a percent let's begin with 100 pixels so now I need to set the animation name property within our box animation name will be slide left but when I refresh everything nothing appears to happen that's because we need to set the animation duration property animation duration how long will this animation take to complete let's start with one second that's one s there's our slide animation feel free to adjust this value if I set this to be two seconds and slightly slower let's change translate X to a different value like 100 this element is translating on the x-axis by one hundred percent the width of the element if I were to set this to a larger number like 300 it's going to appear off screen in my example then slide into place but that also depends on how far you're zoomed in or zoomed out and the with your web browser let's create an animation to slide right let's copy our keyframe rule rename slide left as slide right we'll use the value of 2. we'll begin in our original position we're setting this animation to end up in this position with our element translated to the right by 300 percent let's change the animation to slide right and now we slide to the right okay let's slide up keyframes slide up we'll set the value to be from then we will translate y change the animation name to slide up there we go then slide down all we really need to do is change this value so that's slide down change from to be two then change the animation name again slide down let's create a rotation animation at keyframes rotate so we can use from or to or a percent let's use percentages at one hundred percent what sort of transformation do we want to complete let's use the transform property then do an X rotation rotate X by 360 Degrees that's one full rotation okay let's change the animation name to rotate now we should rotate once on the x-axis let's rotate on the y-axis rotate y then rotate on the z-axis rotate Z so those are a few rotations now check this out if I were to set the keyframe value to be 50 we will complete this animation at the 50 Mark then from 50 to 100 in a way we undo the animation we'll rotate once and then revert back complete the animation at 50 of the length of the duration then with the other fifty percent of the time remaining return that element to where it was previously if I were to mess with these values let's say 25 percent will complete the animation in half a second then with the other 1.5 seconds we return to normal that's why the animation goes fast then when it's undone it goes fairly slow you can mess with these values depending on what you're looking for exactly yeah you can use from two or a percent okay let's create an animation to grow this element we'll scale both the width and the height at keyframes grow at the 100 mark let's set the transform property to be scale then we can use two values two means two hundred percent for the width scale that up by 200 percent same with the height 200 percent let's change the animation to be grow then this should grow then when the animation is complete it snaps back into place but if I were to set this value to be 50 percent it's going to grow then shrink back into place in one smooth motion let's create an animation to shrink at keyframes shrink a 50 mark let's use the transform property then scale by 0.5 comma 0.5 that will be 50 for the width and the height let's change the animation name to be shrink and now we'll shrink this element then it reverts back into place okay let's change the opacity at keyframes this animation name will be fade at the 50 mark let's change the opacity we're not using the transform property this time let's set the opacity to be zero then change the animation name to be fade now we'll Fade Out then back in again if I were to set this value to be 100 this element will fade then when the animation is normal it reverts not smoothly though let's set that to 50. now if you want a fade in effect what we can do is with our box originally we can set the opacity to be zero then add the 100 keyframe the opacity will then be one so this is fade in let's say so the element is originally hidden then it fades in let's get rid of the opacity let's change the color of our element at keyframes color change so at zero percent let's have the background color be red I'll copy the current background color I'll change the animation name too color change then at twenty percent let's set the background color to be orange foreign so we're going from red to orange then at 40 let's pick yellow 60 will be green 80 will be blue then 100 will be purple there you can take the Liberty to pick whatever values you would like let's create a glow effect around our element at keyframes glow this animation will complete at the 50 mark we'll add a box shadow the first value is for the horizontal offset we'll set that to be zero the next value is for the vertical offset which will also be zero then the blur radius I'll set that to be 50 pixels then a color let's go with the yellowish color all right then we need to change the animation name glow then our element glows it's a little difficult to see though with the white background let me change the background color so with the body of our document I will set the background color to be a dark color there's our glow effect you can start animations with the pseudo class for example I want this glow animation to occur when I hover my cursor over the element I am selecting my box ID then applying the pseudo class of hover I'll take the animation name and the duration then place it within the Huber pseudo class for our box then this animation only begins when I hover my cursor over the Box pretty cool right if I were to use the active pseudo class this animation only occurs when I left click and hold the element which I am doing right now let's place these properties back to change the iteration count for an animation to have it occur more than once we can set the animation iteration count property to be some other value besides one if I set this value to be 2 we will perform this animation twice to have it perform infinitely set that to be infinite I would not recommend setting an animation to be infinite just because a viewer can find it annoying unless that's the goal to annoy the viewer alright there's also animation Direction animation Direction normally this is well normal we can change the direction of the animation by setting normal to be reverse now we're sliding to the right to alternate set the value to be alternate we're sliding left then sliding right then sliding left again there's also alternate reverse We Begin by sliding to the right then to the left and then to the right again let's set that to be normal to pause the animation we can set the animation play state to be paused now the animation is paused to run it again set this value to be running this would be useful in conjunction with the programming language such as JavaScript because we can toggle this animation on and off there's also the animation timing function normally with this animation it accelerates then slows down it decelerates the default value is is in out it speeds up then slows down before it reaches its destination for a constant speed we can change that to be linear through the entire animation duration it stays the same speed there's also steps for a sort of stop motion effect within this function if I place the value 5 there's five steps if this was 10 there's 10 steps to complete the animation it creates a stop-motion effect let's change that back to ease and out let's set the iteration count to be one the next timing function is for cubic bezier let's right click on our box inspect underneath our Styles tab look for animation timing function if we were to click on this purple box we can change the timing function currently it's ease and out and there's a little sample animation at the top this is fast out linear in ease out or by dragging and dropping this line we can make something custom like I don't know what this does to use this animation copy this line of text for cubic bezier replace the animation timing function with that line of text so now we have that custom animation I don't really know what to name this animation let's name it the Electric Slide for a final exercise let's apply an animation to an image I just so happen to have an image of Shrek let's have Shrek perform our electric slide animation let's replace our box with an image element set the source to equal the relative file path so Shrek is right next to my index file shrek.png let's copy all of these animation properties cut them we'll select our image then paste those animation properties now Shrek will perform that Electric Slide animation pretty cool right all right everybody that is an introduction to animations using CSS foreign

Channel: Bro Code

Views: 31,255

Keywords: CSS animation, CSS animations, CSS transform, CSS course, CSS tutorial

Id: u_GIT5MJAtc

Length: 15min 18sec (918 seconds)

Published: Thu Sep 21 2023