Gibt es eine Möglichkeit, den Hover-Effekt zu verlangsamen?

Question 1

Gibt es eine Möglichkeit, einen Hover-Effekt zu verlangsamen? Ich habe einen Hover-Effekt auf meiner Website (entfernt), der Text anzeigt, wenn der Mauszeiger über die Bilder bewegt wird. Ich möchte die Wirkung etwas verlangsamen. Es ist ein bisschen erschütternd, wie schnell das Bild umschaltet.

Wie würde ich das machen?

Question 2

Sie könnten CSS3-Übergänge hinzufügen:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

Question 3

Es hängt davon ab, wie Sie den Text anzeigen. Wenn Sie eine CSS-Eigenschaft ändern, können Sie dies mit tun CSS3-Übergänge. Unten ist ein Beispiel.

HTML:

<div id="A"></div><div id="B"></div>

CSS:

div {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;

    -moz-transition: opacity 4s; /* Firefox */
    -webkit-transition: opacity 4s; /* Safari and Chrome */
    -o-transition: opacity 4s; /* Opera */
    transition: opacity 4s;
}
#A {
    background: red;
    opacity: 1;
    z-index: 1;
}
#B {
    background: blue;
    opacity: 0;
    z-index: 2;
}
#B:hover {
    opacity: 1;
}

Demo

Bearbeiten: David Thomas hat mir gesagt, dass Sie die Anzeige nicht mit Übergängen ändern können. Ich habe das Obige aktualisiert, um die Deckkraft zu verwenden.

Question 4

Ich weiß, das ist ziemlich spät, aber schauen Sie sich CSS3-Animationen an. Ich verwende eine Animation auf einem meiner Garry’s Mod-Ladebildschirme.

/* Styles go here */

button {
  margin-left: 50%;
  margin-right: 50%;
}
button:hover {
  -webkit-animation: breathing 5s ease-out infinite normal;
  animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/11164567/style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <p>Below I have a button that changes size on mouse hover useing CSS3</p>
  <button>Hover over me!</button>
</body>

</html>

Ich weiß, es ist nicht ganz das Ergebnis, nach dem Sie suchen, aber ich bin sicher, dass Sie und andere dies nützlich finden können.

Question 5

Wenn Sie möchten, können Sie jQuery .fadeIn() verwenden http://api.jquery.com/fadeIn/

.einblenden( [duration] [, callback] )
Dauer Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
zurückrufen Funktion, die aufgerufen werden soll, sobald die Animation abgeschlossen ist.