I have a hamburger (three horizontal bars) icon I want to change from float: left to float:right but with a smooth animation.

I can't use jQuery but I can use JavaScript so I have this small function that changes float state when the image is clicked:

var menuButton = document.getElementById('menu-button');


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

So this works but not smooth animation how can I make it a smooth animation?

A running demo:

var menuButton = document.getElementById('menu-button');


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

   nav {
        background: pink;
        height: 60px;
    }

    nav #menu-button {
        margin: 20px 24px;
        display: inline;
        float: left;
    }

    <nav id="nav-bar">
        <a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
    </nav>

I have a hamburger (three horizontal bars) icon I want to change from float: left to float:right but with a smooth animation.

I can't use jQuery but I can use JavaScript so I have this small function that changes float state when the image is clicked:

var menuButton = document.getElementById('menu-button');


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

So this works but not smooth animation how can I make it a smooth animation?

A running demo:

var menuButton = document.getElementById('menu-button');


menuButton.onclick = function () {

    menuButton.style.float =  "right";
}

   nav {
        background: pink;
        height: 60px;
    }

    nav #menu-button {
        margin: 20px 24px;
        display: inline;
        float: left;
    }

    <nav id="nav-bar">
        <a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
    </nav>

• javascript
• html
• css
• dom-events

• 1 @PraveenKumar: The second sentence literally starts with "I can't use jQuery" – Madara's Ghost Commented Oct 11, 2015 at 19:07
• My eyes are deceiving me!!! @MadaraUchiha!!! LoL. – Praveen Kumar Purushothaman Commented Oct 11, 2015 at 19:09
• I think you would have to approach it by using a custom setInterval tweening function on a property such as left or marginLeft. CSS as far as I know cannot support float transitions smoothly. – David Li Commented Oct 11, 2015 at 19:12
• this should help css-tricks./… – Ekansh Rastogi Commented Oct 11, 2015 at 19:26

4 Answers 4

If you know the width of your container, do not use float properties but margin-left :

a {
  margin-left: 0;
  transition: margin-left 1s ease-in-out;
}
a.right{
  margin-left: 400px; /* change for good value */
}

Then add right class to your a element with javascript

https://jsfiddle/rd4h4s5h/

Unfortunately, changing left-to-right float can't be simply animated with any current tech, because an animation requires a relative anchor-point from which to perform calculations.

What you could do is animate the relative left-floated position, to an approximated right-floated position (by increasing left-margin, for example), and upon pletion, change to a right-float. But really, the last step isn't necessary, except to handle future layout changes to the page (e.g. window resize, for a fluid-width site).

I was able to get this working using CSS3 transitions and marginLeft.

There's a little hackery in the parentElement.parentElement (to climb two levels of the DOM tree), and in the -44px to account for the icon width plus margin width, but if you wanted to, you could write more plex coded solutions to these (handling the element's actual width / margin on the fly).

var menuButton = document.getElementById('menu-button');
menuButton.onclick = function () {
    var left = menuButton.parentElement.parentElement.clientWidth - 44;
    menuButton.style.marginLeft =  left+"px";
    window.setTimeout(function() {
        menuButton.style.float =  "right";
    }, 1000);
}

nav {
    background: pink;
    height: 60px;
}

nav #menu-button {
    margin: 20px 24px;
    display: inline;
    float: left;

    /* Width and height hack to represent missing image's height and width */
    width: 20px;
    height: 20px;

    /* CSS Transition added */
    -webkit-transition: margin-left 1s;
    transition: margin-left 1s;
}

<nav id="nav-bar">
    <a href="#/index"><img id="menu-button"alt="menu icon" src="images/toggle-open.svg"></a>
</nav>

I would do it this way:

<style>
nav {
    position: relative;
}

nav a {
    position: absolute;
    left: 0;
    transition: left 1s linear;
}
</style>



<nav id="nav-bar">
    <a id="box" href="#/index"><img id="menu-button" alt="menu icon" src="images/toggle-open.svg"></a>
</nav>



<script>
    const navBar = document.getElementById("nav-bar");
    const box = document.getElementById("box");
    const menuButton = document.getElementById("menu-button")

    menuButton.addEventListener("click", (e) => {
       box.style.left = (navBar.offsetWidth - box.offsetWidth) + "px";
    });
</script>

There is a solution now, you could go a different way, achieving EXACTLY what you were trying to: https://stackoverflow./a/75443310/3936149

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 1.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.contact-us-hero-btn {
    border-radius: 27px;
    width: 70%;
    text-align: left;
    border: 0px;
    background: #2f2f2f;
    padding: 8px !important;
    position:relative;
    container-type: inline-size;
}

.contact-us-hero-btn:hover .contact-us-circle {
    /*position: absolute;*/
    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(100cqw - 100%));
        transform: translateX(calc(100cqw - 100%));
    }
}
@keyframes slide-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(100cqw - 100%));
        transform: translateX(calc(100cqw - 100%));
    }
}

.contact-us-hero-btn svg {
    fill: yellow;
}

<button class="btn btn-outline-secondary mt-5 py-2 contact-us-hero-btn text-white" data-action="scroll-to-contact" listener="true">
                                        <svg xmlns="http://www.w3/2000/svg" width="27" height="27" fill="currentColor" class="bi bi-circle-fill contact-us-circle" viewBox="0 0 16 16">
                                          <circle cx="8" cy="8" r="8"></circle>
                                        </svg>

                                  </button>