“This is the 24th day of my participation in the Gwen Challenge.
Self-timing -function: tympanus.net/codrops/css… Thank you
in CSS is a (mathematical) function that specifies the speed over time of an object being animated or converted from one value to another. It describes how transitions or animations will take place over a period of their duration.
For example, if you want to move an object from point A to point B, you can have it move at A linear “steady” speed over the course of 2 seconds, or you can have it start quickly from point A until it reaches halfway, then slow down gradually until it reaches point B. It’s like imagining yourself driving from home to work (assuming, of course, that you don’t work from home). Let’s say it takes 30 minutes to get there; You can drive at a constant speed, or you can start slowly knowing you have plenty of time, and then speed up after 20 minutes to make sure you arrive on time.
This speed change (acceleration or deceleration) in CSS animations and transitions is usually defined by timing functions that describe the speed over time. When some animators generally talk about the “feel”, “physics” or “flow” of animation, they may be referring to the selection of specific timing functions to control the speed of movement over time.
Timing functions in CSS are usually the values of the transition-timing-function and animation-timing-function properties. It is used to define a function that describes how the transition will proceed over its duration, allowing the transition to change speed as it goes along.
The timing function in CSS describes how to calculate the intermediate value during the transition, often referred to in CSS as easing functions.
Defining the timing function
Timing functions can be defined in one of three ways: using a predefined keyword, using a stepping function, or using a cubic Bezier function. The official syntax is as follows:
<timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ]]? | cubic-bezier(<number>, <number>, <number>, <number>)Copy the codeThe steps() timer function
A stepping function is a timing function defined by a number that divides the duration of the transformation into equal intervals. The function also specifies whether the output percentage change occurs at the beginning or end of the interval. This subclass of step functions is sometimes called step functions.
The syntax for this function is as follows:
steps(<integer>[, [ start | end ] ]?)
Copy the codeThe function takes one or two arguments, separated by commas: a positive integer, specifying the number of intervals in the function, and an optional value, start or end, specifying the point within the interval at which the value changes. If the second parameter is not included, the default is end.
A visual representation of the steps() function example is as follows:
The best way to explain this functionality is to use some field examples.
In the following two examples, the first parameter of the steps() function is set to 6, which means that the transition time will be divided into six intervals, and the transition will take place in six intervals, or six steps.
We use the CSS Transition property here to define the transition. The transformation is triggered when you hover over the main container. The entire movement takes place over the course of three seconds, as specified in the transformation declaration. Therefore, each interval will be 3/6 = 0.5 seconds long.
Now, depending on the value of the second argument to the function, the change in position will occur at the beginning or end of each (6) interval.
In the first example, the steps() function’s second argument is set to start; When the conversion is triggered, the value begins to change immediately. So, at time = 0s, at the beginning of the first interval, the first change in value occurs and the box immediately moves 100px to the right.
In the second example, the first change in value (position) occurs at the end of the first interval, time = 0.5 seconds, and the box moves 100 pixels to the right. You can notice this from the initial “lag” in the second animation.
Note: Because nuggets are not good to embed iframe preview effect, only through external link form.
Preview effect see:Steps Preview
This works by dividing the movement or transition of an element into n steps based on the number specified in the function. You then split the duration of the animation into n intervals, and then start performing the motion steps along the interval based on the value of the second argument to the function.
For example, in the demo above, the first box will change its value at t = 0s, which is the beginning of the first interval; So at t = 0s, the box moves its first 100px to the right (100px = 600px/n). Then, at the beginning of the second interval, at t = 0.5 seconds, the box moves its second step by another 100 pixels. It continues to repeat the same steps until it reaches the beginning of the last interval, at t = 2.5 seconds, where it moves the last 100 pixels and stays there, because at t = 3 seconds, the duration of the movement ends, so you can no longer start a new interval, after which no additional steps can be performed.
A visual representation of the steps taken in the first demonstration. The blue line represents six intervals. The point at the beginning of the line is the point at which each interval begins.
In the second demo, the box will start the first of its six moves at t = 0.5 seconds, which represents the end of the first interval (remember, the second parameter is set to end). And then it makes a second move at t equals 1s, which is the end of the second interval. It does this until it reaches the end of the sixth interval at t = 3s, where it performs the last step and the animation ends.
A visual representation of the steps taken in the second demonstration. The blue line represents six intervals. The point at the end of the line is the point at which each interval begins.
Note: there are some mistakes in the original drawing, which have been corrected in red
It’s always a good idea to draw a simple graph, breaking it up into multiple intervals that you specify in the Steps () function to predict how the animation will perform. It also helps to debug many animations that might look wrong at first.
The steps() function can also be used to create some really cool image Sprite animations.
See the CSS Steps function for the image Sprite animation
Cube-bezier () timing function
The cube-bezier() function specifies a cubic Bezier curve.
You can define your own timing functions and create custom easing effects or even bounce effects by defining custom cubic Bezier curves.
If you are familiar with vector drawing software, you have already seen Bessel curves three times. The cubic Bezier curve is defined by four control points P0 through P3 (see figure below).
Visual representation of cubic Bezier curves defined by four control points
Given the beginning (P0) and end (P3) of a line, Bessel curves define two control points for each endpoint (P1 and P2). P0 and P3 are always set to (0,0) and (1,1) relative to each other. The x coordinates of the start and end must always be between 0 and 1. 0 and 1 represent the beginning and end of the animation or transition, so any value less than 0 or greater than 1 will exceed the time boundary of the motion and therefore be invalid.
How to create a cubic Bezier curve between two points.source
Thus, the Bezier curve that defines the “feel” or “flow” of a transition or animation is defined by four points. Two of them are fixed, so you don’t have to worry about them. There are two control points left: P1 and P2, which you need to specify to define the curve, specified by X and Y coordinates (just like any point in the coordinate system).
The X values of the two points must also be within the range [0, 1]. On the other hand, Y values can go beyond this range.
The cube-bezier() function takes four arguments:
cubic-bezier(<number>, <number>, <number>, <number>)
Copy the codeThe four
parameters specify the two control points P1 and P2 of the curve as (x1, y1, x2, y2).
If you’re not a math whiz, have no experience with graphics software, and don’t know how to define these two control points, you might be asking yourself: How do I specify two control points to get the easing I want? Here are three great tools to help create custom easing values:
- Cubic Bezier curves by Lea Verou
- CSS Cubic Bezier generator written by Rob La Placa
- Matthew Lein’s tools
All of these tools provide drag-and-drop capabilities to move control points to get the curve shape you want.
In the following demonstration, we use Lea Verou’s cubic Bezier tool to generate the Cubic – Bezier () function.
In the first example, we set the Y coordinate of one of the control points to be greater than 1 to produce a bouncing effect.
Preview effect see:Cubic – Bezier preview effect
You can use Lea’s tools and generate and preview numerous examples of Bezier curves.
There’s also a nice Easing Function Cheat Sheet available that allows you to preview a lot of custom cubic Bezier effects, which is awesome.
Predefined keywords
In addition to being able to define your own Bezier curves and timing functions, CSS comes with supported keywords that define common easing functions that are equivalent to specific timing functions defined using cubic- Bezier () or steps() functions.
ease
The ease function is equivalent to cubic- Bezier (0.25, 0.1, 0.25, 1). This is the default timing function in CSS. Therefore, if no timing function is specified in the transition-timing-function or animation-timing-function property, easie is the set value.
linear
A linear function is equivalent to cubic- Bezier (0, 0, 1, 1). With linear timing, the speed is constant from start to finish.
ease-in
The easing ease-in function is equivalent to cubic- Bezier (0.42, 0, 1, 1). Using this timing feature, the animation will start slowly, then gain more acceleration and remain stable until the duration ends.
ease-out
The easing ease-out function is equivalent to cubic- Bezier (0, 0, 0.58, 1). Using this timing feature, the animation will start quickly, then slow down and hold steady until the duration is up.
ease-in-out
The slot-in and slot-out functions are equivalent to cubic- Bezier (0.42, 0, 0.58, 1). It’s a combination of slow in and slow out. The animation or transition will start slowly, speed up in the middle, and then slow down until the end.
step-start
The step-start function is equivalent to steps(1, start). Using this timing feature, the animation or transition will suddenly change to the end state and remain in that position until the animation ends.
step-end
The step-end function is equivalent to steps(1, end). Using this timing feature, the animation or transition will remain in its initial state until it ends, and then jump straight to its final position.
You can try the following preview:
Preview effect see:Predefined keywords
Read more
- CSS Transitions()
- CSS Animations
- Understanding CSS Timing Functions
Associated resources
- transition-timing-function
- animation-timing-function