2016-04-10 15 views
2

ホバリング時に左からスライドさせる要素(クラスメジャー - ボタンとして名前を付けました)をしたいと思います。私は、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%; 
} 
+0

申し訳ありませんが、あなたが '左' を置くのではなく、意味、私は '左マージン' を試してみてください遷移プロパティ? –

+0

私の答えを見てください。より良いヘルプを得るには、目的の動作をより詳細に記述します。 – isherwood

答えて

2

要素は、(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

+0

好奇心の外に、パッティングの幅は何ですか:25%; ? –

+0

ボタンが小さくなるとボタンがマウスの下からスライドして部分的なアニメーションが作成されました。動きは、良好なユーザ体験のために要素幅よりも実質的に小さくなければならない。 – isherwood

4

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

関連する問題