How to transition an item to move to the left on hover

Question

I would like my element (which i have named as a class benefits-button) to slide in from the left upon hover. I have created the following two sets of css rules but I am having no luck:

.benefit-buttons {
     transition-property: color, left;
     transition-duration: 200ms;
     transition-delay: .1s;
     transition-timing-function: ease-in-out;
}
.benefit-buttons:hover {
    opacity: 1;
    color: #FF0000;
    left: 50%;
}

Answer 1

 .benefit-buttons { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; width:100px; height:100px; background:red; } .benefit-buttons:hover { opacity: 1; color: #FF0000; transform:translate(50%); } 

 <div class="benefit-buttons"></div> 

Answer 2

An element cannot have a left property unless it's absolutely-positioned ( read more ). Try a left margin as an alternative:

.benefit-buttons {
    width: 25%;
    transition-property: all;
    transition-duration: 200ms;
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
}

.benefit-buttons:hover {
    opacity: 1;
    color: #FF0000;
    margin-left: 10%;
}

Demo