The x axis is the time: 0 – the start, 1 – the end of transition-duration.The timing function describes how fast the animation process goes. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to (0,0) and the 4th one is (1,1). The syntax for a Bezier curve in CSS: cubic-bezier(x2, y2, x3, 圓). For intermediate points, the values of x must be in the interval 0.1, y can be anything.The timing function can be set as a Bezier curve with 4 control points that satisfy the conditions: Let’s start with the curve, as it’s used more often. That property accepts two kinds of values: a Bezier curve or steps. But it becomes very simple if we devote a bit time to it. It appears to be the most complicated property at first. Will it start slowly and then go fast, or vice versa. The timing function describes how the animation process is distributed along its timeline. for instance, -3s here starts the animation from the 3rd second Here the animation shifts numbers from 0 to 9 using CSS translate property: For example, if transition-delay is -1s and transition-duration is 2s, then animation starts from the halfway point and total duration will be 1 second. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For instance, if transition-delay is 1s and transition-duration is 2s, then the animation starts 1 second after the property change and the total duration will be 2 seconds. In transition-delay we can specify the delay before the animation. The time should be in CSS time format: in seconds s or milliseconds ms. In transition-duration we can specify how long the animation should take. However, most of the generally used properties are animatable. Or we could write all, which means “animate all properties”.ĭo note that, there are properties which can not be animated. In transition-property, we write a list of properties to animate, for instance: left, margin-left, height, color. Now, let’s cover animation properties one by one.

Javascript css html classes