This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
CSS keyframes only works in Chrome
My site uses css transitions to fade in new images on the three icons (facebook, twitter, email). The transitions work well on Chrome, but not in Firefox. Here's the css snipper:
.link-button > div{height:79px; width:79px; display:inline-block; zoom: 1; *display:inline;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}
.link-button .facebook{background:url(../img/bt_facebook.png) center center no-repeat transparent;}
.link-button .facebook:hover{background-image:url(../img/bt_facebook_over.png);}
.link-button .twitter{background:url(../img/bt_twitter.png) center center no-repeat transparent;}
.link-button .twitter:hover{background-image:url(../img/bt_twitter_over.png);}
.link-button .email{background:url(../img/bt_email.png) center center no-repeat transparent;}
.link-button .email:hover{background-image:url(../img/bt_email_over.png);}
I'm assuming that my error is directly with the -moz-transition because the :hover state works, but not the transition. I've copied the transition code from w3 school, so I know it's not incorrect, but my Firefox correctly fires the css transitions found on the internet, so I know it's not my browser being faulty. It must be something fundamental I've overlooked.
Any ideas?
The CSS3 specification says background-image cannot be animated. The background-image transition in Chrome is nonstandard.
Related
I need some help with a 3d tranform. The transform is on the a:hover event and uses a:hover and a:before pseudo element to be transformed into a vertical flip, it's like a crad filp but it starts the flip at the base line of the menu, it should look like a cube flipping upwards. Here is the code on code codepen Please try and get this to work in Webkit and Mozilla and of course IE, please see what you can do.
the example i have is limited but it does work in FireFox and no other browsers so this would be better tested in IE and chrome first.example
PS. The pink a:before elements need to be transformed on a flat perpective surface at the bottom of the A tag and the a:before tag should animate upwards in place of the hovered anchor tag (-90deg I think), when it animate the pink tag shown in place of the first tag
You should post code rather than links. However, from your codepen I can tell you're not using vendor prefixes to support multiple browsers.
When you use transition, transform, etc you should write
-webkit-transition: all .3s;
-mos-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
See this SO question: Does Internet Explorer support CSS transitions?
i have some logos which transition on hover but i've always tested with chrome(yeah i messed up)So I just tested it in ff & ie and it's not working (i have the latest versions)
Here is my fiddle http://jsfiddle.net/r6qZw/
and here is the html
<a id="facebook" href="http://facebook.com"></a>
and the css
#facebook {
float: left;
height: 40px;
width: 40px;
background-image: url(http://i.imgur.com/2lAKpSi.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#facebook:hover {
background-image: url(http://i.imgur.com/L7Jmol5.jpg);
}
I know the solution to this is simple but i just couldn't do it. When i remove the background image and just use a color instead, it works but using background image just stops the animation. I still get the second image but it doesn't transition with an animation. I've also tried giving a parent element (like the famous "ul li a" and such)
Can someone help a noob out?
background-image is not a transitionable property (except for gradients, and that's not supported in Chrome - IE supports it though!)
The fact that Chrome can transition the image for you is simply an extension of the standard. This is evidenced by how horrible it looks if you rapidly move your mouse over and off of it repeatedly - normal transitions are smooth in spite of this, but the image "transition" is horrible.
This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 9 years ago.
I have an image with a button on it. The button will only be visible, if I hover over the image.
I change it from display:none to display:block and it appears instantly.
I would like to delay the appearance of this button by 1 sec or make it appear linear, so it's a smooth transition. I saw the CSS3 transition property and applied this, by using opacity, too (0.0 to 1.0).
It seems not to be working. What am I missing? I don't think the -webkit specific properties are the reason.
Check out my fiddle.js example:
Fiddle.js: Image hover over overlay transition example
Thank you!
Here is a working fiddle
I have use all instead of opacity, but either way you can change that too.
.image_controls{
position: absolute;
left: 0;
top:5px;
opacity:0.0;
}
.image_wrapper:hover .image_controls {
-webkit-transition: all 2s ease;
transition: all 2s ease;
display: block;
opacity:.9;
}
You could use jQuery's fadeIn() / fadeOut(). As you tagged javascript and jquery, I guess using JS would not be a concern for you, right?
Using CSS3, I have set a background image as a cover. Upon first loading the page in Chrome and hovering over a link, the background around the text shifts slightly (but quite noticeably). I am using a transition for the hover, but the background shift also happens with the transition removed.
My guess is that the background is resizing during hover, but I'm not sure how to keep this from happening. Once it has shifted, you can rollover other links without any problem. After refreshing the page, the problem persists.
Website is here: http://tylerbritt.com/
Styling is as such:
body{
text-align: center;
margin: 0 auto;
color: white;
font: bold 80pt 'Economica', sans-serif;
background: url(bg2.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: white;
text-decoration: none;
-webkit-transition: text-shadow 0.3s ease-out;
-moz-transition: text-shadow 0.3s ease-out;
-o-transition: text-shadow 0.3s ease-out;
-ms-transition: text-shadow 0.3s ease-out;
transition: text-shadow 0.3s ease-out;
}
a:hover {
text-shadow: 0 0 6px #1c00f6;
}
My problems is very similar to: Background shift in Google Chrome when opacity changes on hover; jfriend00's advice was helpful, but my problem differs because it is purely a text link and not an img.
I'm on Chrome Version 19.0.1084.52. The problem does not exist is Safari. Any advice would be greatly appreciated.
Hey I have noticed the exact same issue. Definitely a chrome thing. Below is an issue I submitted to the chromium project:
Chrome Version : 21.0.1180.89
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
URLs (if applicable): http://jsfiddle.net/9vvy6/62/
http://castlelaw-kc.fosterwebmarketing.com/
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
Safari 5/6:OK
Firefox 14.0.1:OK
IE 9:OK
Chrome:FAIL
What steps will reproduce the problem?
Background image with background-size:cover
Overlaying element (tested with div and a tags) that has a hover effect
For best results, use in a large view port, where the bg image is stretched a lot, and the abbarations are most evident
What is the expected result?
When using a activating a hover effect (like underline, margin change, etc.) the background image should stay consistent (and does on all other browsers tested so far)
What happens instead?
When the hover effect is activated with mouse, the background image warps oddly. In the area around the element, the bg image shits a few pixels.
Please provide any additional information below. Attach a screenshot if
possible.
In the JSFiddle linked above, which uses an ul/li as the example. we determined that changing the ul's display to inline-block corrected the issue.
IMPORTANT: It's super subtle, so you might have to sweep your mouse across the relevant elements a couple times before you notice
UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1
Might be a bug, I don't know if this will work but try background-attachment: fixed;
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/