CODEWITHSUNDEEP
javascriptcsscss-animations
Dejan Munjiza
Dejan Munjiza

Reputation: 798

How to set a timer for CSS animation-timing-function?

Ok, imagine you have created animation with ease-out effect and you set duration for 2s (eg):

animation-name: example;
animation-timing-function: ease-out;
animation-duration: 2s;

Animation-duration property specifies how many seconds an animation takes to complete one cycle, but I was not able to find solution how to (for example) slow down only "ease-out" part of animation.

Here is a fiddle example of simple animation, so you everything ready to test your ideas (if it is even possible?!): https://jsfiddle.net/3nbr6LhL/

(Feel free to use js if you like). Thank you.

Upvotes: 2

Views: 1762

Answers (2)

sdgluck
sdgluck

Reputation: 27237

How to slow down only "ease-out" part of animation?

You cannot slow down only the ease-out part of the animation as ease-out is a built-in reference to a bezier-curve timing function, which defines the behaviour of the 1d transform of a CSS property's value for the whole duration of the animation:

<timing-function>

The CSS data type denotes a mathematical function that describes how fast one-dimensional values change during transitions or animations. This in essence lets you establish an acceleration curve, so that the speed of the animation can vary over its duration. These functions are often called easing functions.

What you can do is create your own bezier-curve using a tool like cubic-bezier.com, amending the ease-out curve as you see fit. For example, here is a slower ease-out timing function:

animation-timing-function: cubic-bezier(0, 0, .8, .45);

[ See working in JSFiddle ]

______

How to set a timer for CSS animation-timing-function?

The answer to this depends on what you mean by setting a timer. If you want to delay the animation then you can use the animation-delay property. For example, to delay an animation by three seconds:

animation-delay: 3s;

[ See working in JSFiddle ]

Upvotes: 3

Wavemaster
Wavemaster

Reputation: 1814

You could use a custom timing function instead of ease-out to exactly control the speed of the animation.

Take a look at this CSS EASING ANIMATION TOOL named Ceaser.

Upvotes: 1

Related Questions