Bir öğenin üzerine gelmek için sola hareket ettirme hakkında geçiş yapma

Question

Öğe (soyad olarak kullanacağım bir sınıf avantajları düğmesi) öğesinin soldan sonra üzerine kaydırılmasını istiyorum. Ben css kuralları aşağıdaki iki set oluşturduk ama hiç şans yaşıyorum: o (read more) kesinlikle bir konuma sürece

.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

Eleman, sol özelliğini olamaz. alternatif olarak bir sol kenar deneyin:

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