Floating Elements

Here’s how you can create floating elements using keyframes animations.

1. Find the #block-id of your elements

Open developer tools and find the block ID of the elements you want to float.

Make sure you grab the id that starts with “block-yui….”

E.g. block-yui_293847923847

2. Copy and paste CSS

Remember to:

• Replace #YOURBLOCKIDHERE with the actual block ID

• Play around with animation duration (5s), transitions (ease-in-out), or even how far the element floats and which direction it goes (translate(0,15px))

/* FLOATING ELEMENTS ANIMATIONS *****/

//Longfloat//
#YOURBLOCKIDHERE {
  animation-name: longfloat;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes longfloat {
  from {
    transform: translate(0,0px);
  }
  
  65% {
    transform: translate(0,18px);
  }
  
  to {
    transform: translate(0,0px);
  }
}

//Shortfloat//
#YOURBLOCKIDHERE {
  animation-name: shortfloat;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes shortfloat {
  from {
    transform: translate(0,0px);
  }
  
  65% {
    transform: translate(0,15px);
  }
  
  to {
    transform: translate(0,0px);
  }
}