Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 10.06.2021, 15:45
top top ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 15
top wird schon bald berühmt werden
Standard

"transition-delay" verzögert die Reaktion bei "transition".

Du mühst dich hier mit "animation" ab. Dazu könntest du die Animationsdauer entsprechend verlängern und zwischen 0% und 100% noch eine Stufe dazwischen einfügen (z.B. 66%) welcher du auch die Angaben wie bei 0% verpasst.

Ich würde das Problem aber grundsätzlich mit transition und nicht mir animation angehen. Versuch es mal so:

Code:
/* @keyframes fade-effect {0% {transform: scale(0.0); opacity: 0;} 100% {opacity: 0.95;}} */
body {padding: 50px; background-color:#999}

.link {text-align: center; display: inline-block; width: 76px; height: 98px; margin: 0 0 10px 0; padding: 0; border-radius: 8px;}
.linkimage {display: inline-block; width: 64px; height: 64px; margin: 0 0 6px 0;}
img {display: inline-block; width: 62px; height: 62px; margin: 2px 0 3px 0; box-shadow:rgba(0,0,0,0.5) 0 2px 4px;}
img:hover {box-shadow: rgba(255,255,255,1.0) 0 1px 5px;}
.linktext {width: auto; height: 30px; display: inline-block; vertical-align: top; font-family: sans-serif; color: #fff; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; text-shadow: rgba(0,0,0,0.7) 0 2px 2px; white-space: normal; text-overflow: ellipsis;}
a {text-decoration: none; color: #888;}

.link .subspalte2 { /*display: none; */ position: relative; background-color: #333; z-index: 1; padding: 20px 0 10px 0; border-radius: 8px; box-shadow: 0 50px 1000px black; border: 1px solid #bbb; width: 172px; height: auto; top: -120px; left: 0px;

  display: table;
  transform: scale(0.01);
  opacity: 0;
  transition: all 200ms ease-out;
  pointer-events: none;
}
.link:hover .subspalte2 {
  transition-delay: 1s;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
Mit Zitat antworten
Sponsored Links