डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - animation-timing-function

Depends on Bezier curve(Computer Graphics)


animation-timing-function Property का इस्तेमाल bezier curve के हिसाब से animation के गति को देने के लिए किया जाता है |


Syntax for animation-timing-function Property

animation-timing-function : ease/linear/ease-in/ease-out/ease-in-out/step-start/step-end/steps(n,start/end)/cubic-bezier(p0,p1,p2,p3)/initial/inherit;;

Live Example


Example for animation-timing-function Property

<style>
span{
 display : inline-block;
 padding : 20px;
 background-color : red;
 animation : ani 5s infinite;
}

.myclass1{animation-timing-function: linear;}
.myclass2{animation-timing-function: ease;}
.myclass3{animation-timing-function: ease-in;}
.myclass4{animation-timing-function: ease-out;}
.myclass5{animation-timing-function: ease-in-out;}

@keyframes ani{to{margin-left:400px;}}
</style>

<span class="myclass1">linear</span><br />
<span class="myclass2">ease</span><br />
<span class="myclass3">ease-in</span><br />
<span class="myclass4">ease-out</span><br />
<span class="myclass5">ease-in-out</span><br />
linear
ease
ease-in
ease-out
ease-in-out


cubic-bezier() Values for Keyword Values

  • ease : cubic-bezier(.25,.1,.25,1)
  • linear : cubic-bezier(0, 0, 1, 1)
  • ease-in : cubic-bezier(.42, 0, 1, 1)
  • ease-out : cubic-bezier(0, 0, .58, 1)
  • ease-in-out : cubic-bezier(.42, 0, .58, 1)

ValueDescription
easeDefault. slow शुरू होता है बाद में fast होता है और आखिर में फिर slow होता है |
linearशुरूआत से आखिर तक समान गति से होता है |
ease-inslow शुरू होता है |
ease-outfast शुरू होता है |
ease-in-outslow शुरू और slow ख़त्म होता है |
step-startDuration के अनुसार start से directly end पर जाता है | ये steps(1, start) के बराबर होता है |
step-endDuration के अनुसार end से directly start पर जाता है | ये steps(1, end) के बराबर होता है |
steps(n,start/end)पहले parameter पर positive number of intervals दिए जाते है और दूसरा parameter optional होता है | वहा पर start या end value दी जाती है, यह intervals के बीच की value होती है | अगर नहीं दी जाती है तो by default 'end' ये value होती है |
cubic-bezier(p0,p1,p2,p3)चारों points के लिए 0 से 1 के बीच की value दी जाती है | ये values cubic-bezier curve को define करके animation को represent करता है |
initialDefault value; set की जाती है |
inheritparent element की value को set किया जाता है |

 

cubic bezier curves

ease
(0.25, 0.1, 0.25, 1)

linear
(0, 0, 1, 1)

ease-in
(0.42, 0, 1, 1)

ease-out
(0, 0, 0.58, 1)

ease-in-out
(0.42, 0, 0.58, 1)