Menu
Is there a way to slow down a hover effect? I have a hover effect on my site (removed) that displays text on hover of the images. I want to slow down the effect by a little. It's a tad jarring how quickly the picture switches over.
How would I do that?
719
You could add css3 transitions:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
I know this is quite a bit late but look into CSS3 animations. I use an animation on one of my Garry's Mod loading screens.
/* 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>I know it's not quite the result your looking for but I'm sure you and others can find this useful.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
