2017-08-15 172 views
0

最初我有一個盒子,通過轉換鼠標懸停時,不透明度從0.5改爲1。它運作良好。懸停動畫fadein不透明度0.5懸停不透明度1

現在我想在不透明度0到0.5的開始添加一個延遲淡入動畫。不幸的是,鼠標懸停轉換不再起作用。

我欣賞每一個想法:)

.box {  
 
width: 200px: 
 
height: 50px; 
 
padding:20px; 
 
background-color: red; 
 
transition: 1s ease; 
 

 
opacity: 0; 
 
opacity: 0.5 \9; 
 
-webkit-animation:fadeIn ease-in 0.5; 
 
-moz-animation:fadeIn ease-in 0.5; 
 
animation:fadeIn ease-in 0.5; 
 
\t 
 
-webkit-animation-fill-mode:forwards; 
 
-moz-animation-fill-mode:forwards; 
 
animation-fill-mode:forwards; 
 

 
-webkit-animation-duration:1s; 
 
-moz-animation-duration:1s; 
 
animation-duration:1s; 
 
\t 
 
-webkit-animation-delay: 3.5s; 
 
-moz-animation-delay: 3.5s; 
 
animation-delay: 3.5s; 
 
} 
 
    
 
.box:hover {transition: 0.5s; opacity: 1; }
<div class="box">This is a Box</div>

+0

也許提供您的標記,或者我們猜測?謝謝 –

回答

0

你有沒有考慮過用少了?

button { 
 
    width: 100px; 
 
    float: left; 
 
    background: #007cbe; 
 
    color: #fff; 
 
    border: none; 
 
    border-radius: 4px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 
button:hover { 
 
    -webkit-transition: 3.5s; 
 
    -moz-transition: 3.5s; 
 
    -ms-transition: 3.5s; 
 
    -o-transition: 3.5s; 
 
    -webkit-opacity: 0.5; 
 
    -moz-opacity: 0.5; 
 
    opacity: 0.5; 
 
}
<button> Button </button>

LESS版本

.transition (@transition) { 
 
\t -webkit-transition: @transition; 
 
\t -moz-transition: @transition; 
 
\t -ms-transition:  @transition; 
 
\t -o-transition:  @transition; 
 
} 
 

 
.opacity (@opacity: 0.5) { 
 
\t -webkit-opacity: \t @opacity; 
 
\t -moz-opacity: \t \t @opacity; 
 
\t opacity: \t \t @opacity; 
 
} 
 

 
button { 
 
    width:100px; 
 
    float:left; 
 
    background:#007cbe; 
 
    color:#fff; 
 
    border:none; 
 
    border-radius:4px; 
 
    padding:10px; 
 
    cursor:pointer; 
 
    &:hover { 
 
    .transition(3.5s); 
 
    .opacity; 
 
    } 
 
}

+0

感謝您的想法!但可能我有點不清楚。鼠標懸停過渡不應該是淡入淡出動畫的一部分。 我嘗試達到從不透明度0到0.5(一次)淡入的div。之後,如果鼠標懸停,它應該將不透明度從0.5改爲1,並將鼠標從1改爲0.5。 – Steffen

1

如果你想淡入的動畫,其在一開始從0變的不透明度爲0.5,則需要將fadeIn定義爲:

.box {  
 
opacity: 0; 
 
-webkit-animation:fadeIn ease-in 0.5; 
 
-moz-animation:fadeIn ease-in 0.5; 
 
animation:fadeIn ease-in 0.5; 
 
\t 
 
-webkit-animation-fill-mode:forwards; 
 
-moz-animation-fill-mode:forwards; 
 
animation-fill-mode:forwards; 
 

 
-webkit-animation-duration:1s; 
 
-moz-animation-duration:1s; 
 
animation-duration:1s; 
 
\t 
 
-webkit-animation-delay: 3.5s; 
 
-moz-animation-delay: 3.5s; 
 
animation-delay: 3.5s; 
 
} 
 

 
@keyframes fadeIn{ 
 
    from{opacity: 0;} 
 
    to{opacity: 0.5;} 
 
} 
 

 
.box:hover {transition: 0.5s; opacity: 1; }