developing a sleek visual transition using CSS animation

Question

developing a sleek visual transition using CSS animation

Have you seen the awesome animation on Discord's website?

Check it out here!

The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images?

I decided to start with this code snippet

img {
  animation-name: move;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes move {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 0px;
  }
}

<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">

But when I tested the code, the image wasn't moving as smoothly as I'd hoped. I thought using

animation-timing-function: ease-in-out;

would do the trick.

Do you see something missing in the code that could be causing this issue?

css animation

Answer 1

Answer №1

When focusing on animations, it is crucial to consider both the duration and distance of movement. Additionally, the type of animation chosen plays a significant role in the overall effect. Opting for margins over CSS transforms can often lead to smoother animations as it reduces the reliance on GPU rendering, which is typically more efficient for animation purposes.

In order to replicate the timing and animation styles used on platforms like discord, you may need to adjust your code accordingly. Here's an example:

img {
  animation-name: move;
  animation-duration: 1.9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: translate3d(0,-6px,0)
  }

  to {
    transform: translate3d(0,6px,0)
  }
}

<img src="https://samplewebsite.com/image.png">

Answer 2

When focusing on animations, it is crucial to consider both the duration and distance of movement. Additionally, the type of animation chosen plays a significant role in the overall effect. Opting for margins over CSS transforms can often lead to smoother animations as it reduces the reliance on GPU rendering, which is typically more efficient for animation purposes.

In order to replicate the timing and animation styles used on platforms like discord, you may need to adjust your code accordingly. Here's an example:

img {
  animation-name: move;
  animation-duration: 1.9s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: translate3d(0,-6px,0)
  }

  to {
    transform: translate3d(0,6px,0)
  }
}

<img src="https://samplewebsite.com/image.png">

developing a sleek visual transition using CSS animation

Answer №1

Similar questions

Content does not become interactive upon the initial loading of the page

The unitPngFix plugin ensures that the display of hidden div elements cannot be altered

Is there a way to move the bootstrap carousel item captions outside of the image without having to set a specific height for the carousel manually?

Code not functioning properly in Internet Explorer

Can you explain the distinction between div and span tags?

"Is an Ionic Top Navigation Bar the best choice for your

jQuery is optimized to work specifically with select id tags

Issues with JQuery .attr method not functioning as expected

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

What is the process for modifying the attributes of a currency text box in a Dojo within XPages?

Switching the position to fixed causes it to lose its justification functionality

Steer clear of using inline styling when designing with Mui V5

Troublesome alignment with bootstrap grid system

Ratios for Sizing Bootstrap Columns

Elevation on Tab button from the upper side

Combining D3.js tooltip positioning with CSS overflow styling

Using jQuery to swap out intricate background designs

Show one line of text at a time with a pause in between each one

Hovering over elements with the FireFox CSS transition 'transition-all' can sometimes lead to flickering and unexpected behavior

What is the best way to insert my words within the boundary?