Take it easy when getting out of the CSS3 hover state
Another CSS3 question. I was able to rotate (360) the image on hover, but it maintains speed when exiting a hovered state. Ideally I am looking for a solution to slow down the speed when exiting a hover state. I know there is a property (relief) to achieve this, but I cannot find a working solution. After many tries, I was hoping to get some pointers.
Markup:
<div class="account-holder">
<img src="/images/profile/avatar.png" class="my-image"/>
<p><strong>Welcome</strong>Terry Wingfield</p>
</div>
Styles
.my-image
{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.my-image:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
I've set it back to what I originally had. Any help would be appreciated and thoughts of rewriting the styles above into shorthand would be highly welcome.
Hello,
source to share
Read this awesome article. You put your code in .my-image
for transitions hover off
(mouseleave). And for hover on
you put your code in .my-image:hover
.
So your last code:
.my-image {
/* Slower transition off hover */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.my-image:hover {
/* Faster transition on hover */
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360def);
}
Hope this works.
source to share
If I understand correctly, you want to decrease the speed of the change animation. So I made some changes to your codes CSS
. Hence, your codes look like this :
Markup:
<div class="account-holder">
<img src="/images/profile/avatar.png" class="my-image"/>
<p><strong>Welcome</strong>Terry Wingfield</p>
</div>
Styles
.my-image
{
-webkit-transition: -webkit-transform 2s ease-in;
-moz-transition: -moz-transform 2s ease-in;
-o-transition: -o-transform 2s ease-in;
transition: transform 2s ease-in;
}
.my-image:hover
{
-webkit-transition: -webkit-transform 1s ease-in;
-moz-transition: -moz-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
transition: transform 1s ease-in;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Hope this solves your problem :)
source to share