Unterschiedliche Zeiten für Beginn und Ende von Übergängen?

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 

 
.circle { 
 
    margin-top: 20px; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 100%; 
 
    background: red; 
 
    opacity: 0; 
 
    transition: opacity 0.5s ease; 
 
} 
 

 
.box:hover + .circle { 
 
    opacity: 1; 
 
}

<body> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="circle"> 
 
    </div> 
 
</body>

Hier wird, wenn ich über .box schweben, verblasst .circle in 0.5s in.

Jetzt, wenn ich den Cursor von .box wegbewege, möchte ich .circle mit einer anderen Geschwindigkeit (sagen wir 1s) ausbleichen. Wie man es möglich macht?

Quelle

2016-10-23 Arif

Sie müssen die Off-Dauer für den Nicht-Hover-Status und die On-Dauer für den Hover festlegen.

denn das ist, wenn Sie schweben, die :hover Eigenschaften Vorrang (vorausgesetzt, Ihre Wähler sind korrekt angegeben), so dass die Dauer, die Sie für Hover haben gelten. Sobald Sie den Mauszeiger verlassen, gelten die Eigenschaften, die für das normale Element festgelegt wurden.

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
.circle { 
 
    margin-top: 20px; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 100%; 
 
    background: red; 
 
    opacity: 0; 
 
    transition: opacity 2s ease; 
 
} 
 
    
 
.box:hover + .circle { 
 
    opacity: 1; 
 
    transition-duration:0.5s 
 
}

<div class="box"></div> 
 
<div class="circle"></div>

Quelle

2016-10-23 17:41:32

Unterschiedliche Zeiten für Beginn und Ende von Übergängen?

Antwort

Verwandte Themen