in the movement of CSS animation in particular as well as all animations in other design Fields timing function is a decisive factor in the smoothness and naturalness of an animation completely controlled by two axis progression curve and timeline thereby creating countless styles of movement called animation timeline with linear the conversion speed will be even throughout the process there are also ease ease in ease out ease and out even if you have enough control over this 2 dimensional space you can use cubic baser to move the way you want and so everyone thinks every timing function
must follow the rules of the animation timeline however this is not true if cubic bezier is said to be an omnipotent timing function because it can simulate every timing function that exists in the world but there is a timing function that cubic baser cannot simulate because it does not comply with the rules of the animation timeline coordinate axis it is steps [Music] think of it this way all animations performed by basic timing functions will move the object from the start point to the end point the difference between them is simply the speed of the stages
in the movement process and here is how the steps timing function moves instead of moving the elements slowly to the Finish Line it creates jumps to bring the element to the final position what's more each time the element is displayed it stays still and at a specific time it immediately moves to the next position it feels quite interesting but where and when will will it be applied please like And subscribe to the channel if you find the content interesting and now let's go into an example of how we can use the steps timing function here
I have prepared a small image in advance which depicts the small movements of a jump in HTML I prepared a box element now I will use the image when it becomes the background for this element with the requirement that the height of the image will be equal to the height of the element next I want this element to be just large enough to see the first model in the image so I just need to shrink the width of the Box element so this is the current state of it the part that is blurred out is
the part that we can't see I want to create an animation where the image moves to the left so that all the images inside are shown at least once with the default initial position of the background being zero horizontally and zero vertically I'm going to create an animation that runs for 4 seconds with the default timing function being linear of course it will Loop forever with infinite in this animation key frames I'm going to change the horizontal position of the image to 100% to simulate the motion we want and this is what we get so
what happens if I change the timing function to steps nothing happens when using the steps timing function in CSS we need to give it the number of steps we want to jump not counting the first position so if I want each of the remaining images to appear in the frame of the Box element then we need nine steps replace place it here so each image has appeared in the frame next we reduce the animation time to 1 second since the images have been changing rapidly over a long period of time it has helped us simulate
the image of a game character performing a jump action and here is how it will be displayed in reality of course in these use cases each image will usually contain more actions for example the first line will describe the jump the second line will describe the standing position and the third line will describe the running movement depending on the complexity of the game there will be more lines describing other states and of course it will still be a single image back to the code I'll now insert the new image here since the new image has
three rows I'll set the height of the image to 300% so that each frame only shows one row by default we'll see the jump in the first row to be able to activate other motion states is also very simple the key lies in the top position if 0% corresponds to a jump action then 50% will correspond to a pose so I just need to replace the new value in the two positions reflecting the top distance of the image and the post state is activated similarly with a distance of 100% we can activate the running state
in the third line I changed the value here to 100% so it was activated it's that simple right obviously to change the state I just need to change the position Top Value so to make our code simpler and more professional I use the position top variable instead of assigning a value directly here with the default value being zero corresponding to the jump action so now when I want to trigger the pose Behavior I just add the pose class in the CSS when the Box element is given the posst class I change the position variable value
to 50% to trigger it similarly the Run action will have a run class and a position top value of 100% it's simple right just like that no matter how many actions are described in the picture our job is simply to change the position of the top to suit and here is the complete demo hope this short video will be interesting to watch to find these images you just need to search for the keyword action steps or a specific action and add steps after a notice that the actions inside that image will have to be aligned
in a balanced position to create the smoothest and that is all the content I want to share with everyone in this video if you find it interesting don't forget to like And subscribe to the channel to continuously update interesting videos about web design and programming thank you everyone see you in the next [Music] video what
