So my hover effect works just fine in every browser including IE9+ and it does work in Chrome except hovering on/off the element in certain places can make it skip the animation and snap straight back to the starting positing instead of fading slowly.
This only happens with Chrome, is it a bug, or is there something I can add in my code to smooth things out for Chrome and make sure it always animates back to the default state instead of just jumping to it.
Its using an image with the following class attached to it, the image is also using shape-outside to form text around it so i've included all the CSS code below - the animation slightly rotates and tilts the device picture on hover.
.floatleft {
float:left;
width: 240px;
height: 341px;
-webkit-shape-outside: url(http://url.com/image.png);
-o-shape-outside: url(http://url.com/image.png);
shape-outside: url(http://url.com/image.png);
-webkit-shape-image-threshold: 0.5;
-o-shape-image-threshold: 0.5;
shape-image-threshold: 0.5;
-webkit-shape-margin: 20px;
-o-shape-margin: 20px;
shape-margin: 20px;
margin:20px;
display:inline-block;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out;
transition-timing-function: linear;
}
.floatleft:hover, .floatleft:active
{
-webkit-transform:rotateX(-13deg) rotate(-5deg);
transform:rotateX(-13deg) rotate(-5deg);
-o-transform:rotateX(-13deg) rotate(-5deg);
-moz-transform:rotateX(-13deg) rotate(-5deg);
-ms-transform:rotateX(-13deg) rotate(-5deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
Heres the Fiddle - http://jsfiddle.net/d5wnnqfd/
Related
So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center')
And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?
Here's my code:
#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}
#welcome #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
transform-origin : center center;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>
The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com
Thank you for taking the time!
The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:
You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).
Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.
Hope that helps.
Apparently I don't know how to Stack Overflow. My original comment as an actual answer:
It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.
You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.
I have a hovering effect on an image. If you mouseover it and stay there with the mouse, the transition will be execute with its given duration.
I have also done the correct transition when you leave the spot.
Now, i want that the hover transition starts with the given duration, no matter if you just hovered over the image for a quick 1millisecond.
Is this only possible with javascript?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
With this, if i hover over the image, my text and background colors animating in and when i leave the image the text and background color is animating out. It works okay. (even though, my above code is a bit unsorted for now)
So, all i want is that the fading in and out animation will be fully executed even if i just hover fast over the image and back.
I think it is not possible is it? (with css only i mean)
I am afraid, you would have to use a bit of Javascript because as far as I know, it is not possible to do it without javascript.
Add a class on hover, and remove it on animation end. Refer to this answer to know how to do that - css3 animation on :hover; force entire animation
PS: I would have put this is a comment, but I don't have the privileges right now.
I have tried spinning and sliding seperately and they work fine. But when I combine them they have an awkward combo.
http://jsfiddle.net/62RJc/268/
img{
border-radius:50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
Its because you are using keyFrame, you can achieve this with transform alone.
Take a look at this:
(Also, hovering an img while its moving is not an easy task)
img{
border-radius:50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
button:hover + img {
position: relative;
transform: translateX(200px) rotate(360deg);
}
<button>Animate!</button>
<img src="http://lorempixel.com/output/nature-q-c-100-100-9.jpg"/>
To make image stay where it is after animation ended:
1) Remove button:hover + img {} from CSS
2) Add JS
JQuery:
$('button').click(function() {
$('img').css('transform', 'translate(200px) rotate(360deg)');
});
JS Fiddle - Element not returning to starting position!
I have a jsfiddle set up of the code I have so far. Basically I can't seem to make the rollover animation happen with hover for the main body of text in each ul.
So when you rollover the individual areas the code for opacity on these classes.....
.browser .statistic,
.browser .download {
display: block;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
Becomes 1. But i can't seem to get the transition animation to happen Can someone point me in the right direction.
Cheers,
Greg.
sorry if i missunderstanding you.
i just added:
li:hover .browser * {
opacity: 1;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}
DEMO: http://jsfiddle.net/zn09vjbv/1/
UPDATE:
is there any way to get the "h2 span" class to also change its
background position when the li is hover ?
yes, just add this: (add any attribute you like inside this class)
li:hover .browser h2 {
background: #000;
color; #FFF;
......
}
you need to set the transition on the main class of the object you are trying to animate, not on the class you are adding on hover
.initial-element{
opacity:1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.initial-element:hover{
opacity:0;
}
I've been thinking about this issue for the past few days but I can't figure out what exactly is the problem.
Consider the following snippet from style.css:
.tint:before {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover:before {background:rgba(159,182,205,0.1);}
As you can see from the code above, upon an image hover, a "tint" transition should occur as to make the user want to click on that image. However, this feature does not work in Chrome.
Why does the hover transition not work in Chrome yet works perfectly fine in Firefox?
Is this the expected behavior? Or does Chrome not render these transitions correctly?
The problem is related to the :before pseudo class. It doesn't seem like hover is being triggered on that class. If you remove it, it works just fine.
.tint {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.tint:hover{background:rgba(159,182,205,0.1);}
Here is the jsFiddle - http://jsfiddle.net/qGAn9/
UPDATE:
If :before pseudo element is needed, then you can trigger the hover on the parent element. I also had to add some additional styles to make the pseudo element appear on top.
.tint:before {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
content: "";
width: 100%;
height: 100%;
position: absolute;
}
.tint:hover:before{background:rgba(159,182,205,0.5);}
jsFiddle here - http://jsfiddle.net/qGAn9/2/