Как переместить элемент для перемещения влево на зависании

Question

Я бы хотел, чтобы мой элемент (который я назвал в качестве кнопки льгот класса) перемещался слева при наведении. Я создал следующие два набора правил CSS, но я не имею никакой удачи:

.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

Элемент не может иметь левую собственность, если это не совсем расположенные (read more). Попробуйте левый край в качестве альтернативы:

.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

Answer 2

.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>