Question 167424 in Html Question posted in
Some basic documentation can be found here.

Html – Make "hovering" css animation more natural

I have an animation going in css that is supposed to make it seem like the div is "floating" or "hovering", slowly moving. But it just doesn’t seem natural at all, it slows by the corners. What detail may make it seems smoother?

Snippet

@keyframes floating {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(10px, 0);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.floating-div {
  animation: floating 8s infinite;
}
<div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
    Bzbz
  </div>
Tags:

3

Answers


  1. 0

    You can use animation timing function with linear value, so that animation doesn’t slow down on the corners and stay uniform. Here is the updated code. Try this:-

    @keyframes floating {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(10px, 0);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.floating-div {
  animation: floating 8s infinite linear;
}
    <div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
    Bzbz
  </div>

    The animation progress through a duration of each cycle can also be adjusted using cubic-bezier function. For linear progress, the value of cubic-bezier function will be 0.0, 0.0, 1.0, 1.0. Here is the sample code:-

    @keyframes floating {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(10px, 0);
  }

  50% {
    transform: translate(10px, 10px);
  }

  75% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.floating-div {
  animation: floating 8s infinite cubic-bezier(0.0, 0.0, 1.0, 1.0);
}
    <div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
    Bzbz
</div>
    Login or Signup to reply.
  2. 0

    small improvement with gradient 😉
    By using animation-timing-function, you can enhance the smoothness of your animation
    I recommend to check https://animista.net/play/background/bg-pan/bg-pan-right, there are many ready animations

    @keyframes floating {
            0% {
                transform: translate(0, 0);
                background-position:0% 50%;
            }
            
            25% {
                transform: translate(50px, 0);
                background-position:100% 50%
            }
            
            50% {
                transform: translate(50px, 50px);
                background-position:0% 50%
            }

            
            75% {
                transform: translate(0, 50px);
                background-position:100% 50%
            }
            
            100% {
                transform: translate(0, 0);
                background-position:0% 50%
            }
        }
        
        .floating-div {
            animation: floating 8s infinite;
            animation-timing-function: linear;

            background: linear-gradient(270deg, #f7f200, #021df7);
            background-size: 400% 400%;
        }
    <div class="floating-div" style="width:100px; height: 100px; border: 2px solid #000000; border-radius: 10px;">
  Bzbz
</div>
    Login or Signup to reply.
  3. 0

    To make the animation of the div floating or hovering smoother, you can adjust the keyframes in the CSS animation. Currently, the animation moves the div in fixed steps, causing it to slow down at the corners. Here’s an updated version of the CSS animation that should provide a smoother floating effect:

    @keyframes floating {
0% {
transform: translate(0, 0);
}

25% {
transform: translate(5px, -5px);
}

50% {
transform: translate(10px, 0);
}

75% {
transform: translate(5px, 5px);
}

100% {
transform: translate(0, 0);
}
}

.floating-div {
animation: floating 8s infinite;
}

In this updated version, the div moves in smaller steps and introduces a   diagonal movement. This change helps create a smoother floating effect. Feel free to adjust the values as needed to achieve the desired effect.

    Additionally, you can experiment with the animation-timing-function property to change the easing of the animation. The default value is ease, which can cause the animation to slow down at the beginning and end. You can try using different values such as linear, ease-in, ease-out, or ease-in-out to see which one produces the desired smoothness. For example:

    .floating-div {
  animation: floating 8s infinite ease-in-out;
}

    By making these adjustments, you should be able to achieve a smoother and more natural floating or hovering effect for your div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search