Menu
How can I change the acceleration of how fast a CSS transition speeds up and slows down.
For example, if I run this code:
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-duration: 4s;
}
div:hover {
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div></div>
it speeds up at a specific speed and starts slowing down at a specific speed.
How can I change the speed of how fast it speeds up and slows down (not the actual transition time, just the acceleration and deceleration)
582
CSS3 transition-timing-function Property
The transition-timing-function property specifies the speed curve of the transition effect.
This property allows a transition effect to change speed over its duration.
Syntax
transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit;
DOCUMENTATION HERE w/ Examples
186
For this, you need to use transition-timing-function.
From W3C
The
transition-timing-functionproperty describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions.
Now, you want to create a deceleration transition. For this, you need to look at position - time graph of deceleration and create a cubic-bezier() function similar to it.
Alter the values of the cubic-bezier function to suit your needs.
Code Snippet :
div {
width: 100px;
height: 100px;
background: red;
transition-duration: 1s;
transition-timing-function:cubic-bezier(0.2,0.5,0.3,1);
}
div:hover {
width: 200px;
background: blue;
}<div></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
