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!
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 want both animations to execute on hover and then reset back after the cursor moves away like the rotate animation I have below. So I just need to combine the grow animation with a keyframe or ? Any Suggestions? Thanks.
#rotating_image {
position:absolute;
left:70px;
top:100px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#rotating_image:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">
Try looking into scale(), also note that you can use multiple transformations.
#rotating_image {
position: absolute;
left: 70px;
top: 100px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#rotating_image:hover {
transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
-webkit-transform: rotate(360deg) scale(2);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id="rotating_image">
So this will only work if you know the start and end height... But basically height transitions have to use the max-height affect. The following example assumes you want it to grow from 100px -> 400px. Let me know if it would need to be dynamic heights
#rotating_image {
position:absolute;
left:70px;
top:100px;
height: 400px;
max-height: 100px;
-webkit-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#rotating_image:hover {
max-height: 400px;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">
To do this, you can put two methods in the transform like this:
#rotating_image {
position:absolute;
left:70px;
top:100px;
-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#rotating_image:hover {
-ms-transform:rotate(360deg) scale(2,2);
-webkit-transform:rotate(360deg) scale(2,2);
transform:rotate(360deg) scale(2,2);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">
The 2's in the scale() are just examples. You can use different numbers. scale() multiplies by the numbers in the parameter: first is the width, second is the height. Also, the properties with the prefixes should always come before the properties without them. Example to explain previous sentence: -webkit-transform and -ms-transform should come before transform.
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/
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 made custom tooltip, and before applying any CSS3 animation I displayed those tooltips using display: none; for hiding it, and display: inline-block; for showing tooltip. This works ok, but now I want to animate opacity of tooltip, so it have nice fade effect. But, I have problems with this, so I need your help. This is what I've tried:
.title div.tooltip{
display: inline-block;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.title:hover div.tooltip{
display: inline-block;
filter: alpha(opacity=50);
opacity: 0.5;
}
and this is markup:
<li class="title">
<div class="tooltip">
<label><em>Full title:</em> <?php echo $groups['title']; ?></label><br>
<label><em>Description:</em> <?php echo $groups['description']; ?></label><br>
</div>
</li>
Removing the filter: alpha(opacity=50); and adding the opacity:0; to .title div.tooltip{... worked for me.
The default for the opacity was 1, so the fade-in was going from 1 to 0.5 -- Also, I believe the filter: alpha(opacity=50) was overwriting the opacity transition completely and jumping right to opacity=50. You could also have added transitions for filter
.title:hover div.tooltip{
display: inline-block;
opacity: 0.5;
}
.title div.tooltip{
display: inline-block;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
see updated JsFiddle - includes your complete css found in comments.