Different Timing Functions for Different Parts of CSS3 Keyframe Animation? (Accurate Bounce)

Different timing functions for different parts of css3 keyframe animation? (accurate bounce)

Rather than specifying a timing function for the entire animation, you can specify for each key frame. The function represents how the the values are interpolated from the beginning to end of the respective key frame.

Here's an example by adding an ease function to the keyframes 20%, 40%, 60%, 74%, 84%, 92%, 100%.

@keyframes bounce {  20%, 40%, 60%, 74%, 84%, 92%, 100% {    transform: translate(0, 0);    animation-timing-function: ease;  }  0% {    transform: translate(0, -100vh);  }  30% {    transform: translate(0, -40vh);  }  50% {    transform: translate(0, -20vh);  }  68% {    transform: translate(0, -10vh);  }  80% {    transform: translate(0, -5vh);  }  88% {    transform: translate(0, -2vh);  }  96% {    transform: translate(0, -1vh);  }}
.ball {  background: #ff0000;  border-radius: 50%;  position: absolute;  top: 500px;  width: 50px;  height: 50px;  animation: bounce 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 1 normal forwards;}

<div class="ball"> </div>

Is it possible to have different transitions for the same animation?

The transition property doesn't do anything inside of keyframes. You can either use the transition property to specify how the paint transitions between selectors/transforms (ie, default and :hover), or you can use keyframes to specify how it transforms over time range (ie, from/to, or 0%, 50%, 100% etc).

When you think about it, they're two separate ways of expressing the same information.

You can use the animation-timing-function property in the individual keyframes if you want more control over transitions. Just know it wasn't supported in Safari (iOS/OSX) until around 2015, so you might run into trouble if you need to support those versions.

CSS3 Animation On enter scaling timing function

There are 2 places where you can set a timing function: globally in the same place where you set the animation, or in the keyframes rule.

But, in the latter case, you have always n keyframes and n - 1 time intervals. IN your case, 2 keyframes and 1 time interval.

The timing function stated on a keyframe applies to the time interval that begins in this keyframe.

So, the correct way to apply a timing function on the keyframes would be on the first one:

@keyframes iconEnter {    0% {        transform: scale(0.1);        animation-timing-function: cubic-bezier(.25,8,.25,-8);    }    100% {        transform: scale(1);    }}

div {    width: 100px;    height: 100px;    margin: 100px;    background-color: tomato;    transform: scale(0.1);}body:hover div {    animation: iconEnter 4s forwards;}

<div></div>

Make a ball bounce with decreasing height of each successive bounce using just CSS and HTML

I tried to play with height and width values. I think it can help you.

@keyframes bounce2 {
  0% {
    transform: translate(0, -300%);
    height: 120px;
  }
  12% {
    height: 120px;
  }
  20% {
    transform: translate(0, 0);
    height: 90px;
    width: 110px;
  }
  40% {
    transform: translate(0, -150%);
    height: 110px;
    width: 100px;
  }
  50% {
    height: 110px;
    width: 100px;
  }
  60% {
    transform: translate(0, 0);
    height: 95px;
    width: 105px;
  }
  80% {
    transform: translate(0, -75%);
    height: 95px;
  }
  100% {
    transform: translate(0, 0);
  }
}

Why is my bounce animation so jumpy instead of smooth?

The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-duration to suit your needs.

.animated {  -webkit-animation-duration: .5s;  animation-duration: .5s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;  -webkit-animation-timing-function: linear;  animation-timing-function: linear;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;}@-webkit-keyframes bounce {  0%, 100% {    -webkit-transform: translateY(0);  }  50% {    -webkit-transform: translateY(-5px);  }}@keyframes bounce {  0%, 100% {    transform: translateY(0);  }  50% {    transform: translateY(-5px);  }}.bounce {  -webkit-animation-name: bounce;  animation-name: bounce;}#animated-example {  width: 20px;  height: 20px;  background-color: red;  position: relative;  top: 100px;  left: 100px;  border-radius: 50%;}hr {  position: relative;  top: 92px;  left: -300px;  width: 200px;}

<div id="animated-example" class="animated bounce"></div><hr>

How to get a gravity effect in a CSS animation?

I think that you can do it using bezier curves.

in you case, it could be something like that:

-webkit-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

I haven't done it by myself, check this link:

css easing animation tool

I have made an example in a JSFiddle.

I put an outer div to make the hover stable:

<div class="container">
    <div class="moving"></div>
</div>

and the CSS is as follows:

.moving {
    position: absolute; width: 200px; height: 150px; top: 50px;  left: 50px;
    background-color: green;
    -webkit-transition: all 5s cubic-bezier(0.310, 0.440, 0.445, 1.650); 
}

.container:hover .moving {
    zoom: 1.5;
}

Editing

Just an image of what can you get with a bezier curve (from the ease animation tool page) to show that the object speed doesn't need to be constant (and can be almost parabolic)

CSS/SVG Animation Effect - Three Bouncing Squares - Correct Timing

Let's say that you want only a circle "in the air" at the same time.

Then, the key frames with a transition applied must cover only 33%.

This gives :

@keyframes jump {  0% {    transform: translateY(0px);  }  16.5% {    transform: translateY(-12px);  }  33%, 100% {    transform: translateY(0px);  }}
.square-1 {  animation: jump 2s ease infinite;}
.square-2 {  animation: jump 2s .6s ease infinite;}
.square-3 {  animation: jump 2s 1.2s ease infinite;}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50" style="padding-top: 100px;">      <rect class="square-1" x="0" width="50" height="50" style="fill:tomato"/>          <rect class="square-2" x="60" width="50" height="50" style="fill:tomato"/>            <rect class="square-3" x="120" width="50" height="50" style="fill:tomato"/>        </svg>

---

Related Topics