C'è un modo per rallentare un effetto hover? Ho un effetto hover sul mio sito (rimosso) che visualizza il testo al passaggio del mouse sulle immagini. Voglio rallentare l'effetto di un po '. È un po 'fastidioso il modo in cui l'immagine cambia rapidamente.C'è un modo per rallentare l'effetto hover?
Come faccio?
Si potrebbe aggiungere transizioni CSS3:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
Funziona con '*: hover'? – xameeramir
Dipende da come si sta visualizzando il testo. Se stai modificando una proprietà CSS, puoi farlo con CSS3 transitions. Di seguito è un esempio.
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;
}
Edit: David Thomas mi ha detto che non si può chan ge il display con le transizioni. Ho aggiornato quanto sopra per usare l'opacità.
Non è possibile "passare" tra gli stati di 'display'; certamente non tra 'display: block' e' display: none'. Il contenuto salterà semplicemente e quindi, forse, si animerà. –
@DavidThomas, grazie per l'avviso. Non lo sapevo. Forse può essere fatto con l'opacità? Ho modificato la mia risposta per riflettere questo. – Zhihao
Sì, è possibile la transizione di "opacità". Trovo che un'opzione migliore qui. – BoltClock
Se vuoi, si potrebbe usare jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn ([durata] [, callback])
durata stringa o un numero per determinare quanto tempo il l'animazione verrà eseguita.
callback per chiamare una volta completata l'animazione.
So che è un po 'tardi, ma guardate le animazioni CSS3. Uso un'animazione su una delle schermate di caricamento del mio Garry's Mod.
/* 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="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>io so che non è proprio il risultato il vostro ricerca, ma sono sicuro che voi e gli altri possono trovare questo utile.
è un'opzione per l'utilizzo di jQuery? –
http://cherne.net/brian/resources/jquery.hoverIntent.html –