I have this SCSS that, in theory, should transition the background color smoothly, but it is not smooth in specific browsers.
See this codepen for a demo: http://codepen.io/ahegyi/pen/Wvjajy
(Click on the photo or note text to activate the transition. It's more obvious if you click on the text.)
.overlay {
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
background-color: rgba(0,0,0,0.3);
&.reveal {
background-color: rgba(0,0,0,0);
}
&.conceal {
background-color: rgba(0,0,0,0.7);
}
}
In Chrome desktop (version 42.0.2311.152, Mac OS 10.9) and Firefox desktop (version 36.0.4, Mac OS 10.9), the transitions are smooth.
However, in Safari (both desktop v7.1.3 + mobile Safari on iOS 8.1.3) and Chrome mobile on iOS (v 38.0.2125.59) do not transition, and instead snap directly.
Can anyone reproduce this issue? Is this a bug in certain versions of WebKit, or am I missing something here? Could it be that other transitions I use interact poorly with this particular transition? (In parallel, I'm also using a height transition on .mark-note-text h2, and a jQuery slide effect on the .mark-content div.)
The issue appears to be caused by a syntax error in your externally loaded CSS.
In this file, you will find this code.
.mark-object .overlay{-webkit-transition:background-color, 200ms, ease;-moz-transition:background-color, 200ms, ease;-ms-transition:background-color, 200ms, ease;-o-transition:background-color, 200ms, ease;transition:background-color, 200ms, ease;
Which looks like this beautified.
.mark-object .overlay {
-webkit-transition: background-color, 200ms, ease;
-moz-transition: background-color, 200ms, ease;
-ms-transition: background-color, 200ms, ease;
-o-transition: background-color, 200ms, ease;
transition: background-color, 200ms, ease;
As you can see, there are commas between the properties, the duration, and the easing function, but there should only be commas to delimit different properties.
Also, the CSS you have in your CodePen is less-specific than your external CSS, so it has no effect. If you were to increase the specificity, your pen would work.
You can see how Safari is error-handling this in the applied styles.
However, Firefox error handles it in a different way, assuming all for the bare settings.
We can see from the computed styles that non-iOS Chrome does the same as Firefox.
Of course, the reason Chrome behaves the same as Safari on iOS is because iOS Chrome uses the same rendering engine as Safari, as per Apple's requirement.
At the moment, I have a style like this:
.clip td{
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
I then add a css class and then use setTimeout to remove the class giving a simple fade animation.
Is it possible to achieve the same effect without javascript and have a complete css solution?
Use CSS3 animation and use it's delay and timing functions. You probably still end up using JS to trigger the animation if it doesn't happens right after page load.
Chris has a nice article to help you understand and write CSS3 animations:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
http://coreytegeler.com/new/ click on the up arrow and hover over the figure to see what I'm talking about
Ok so I am trying to create an inversion effect on hover of the silhouette, I've gotten all the CSS to change accordingly and used some minor JS to replace the image but the fading transition for the image goes much quicker than everything else. Even when setting the time to far more than it should be it does not seem to effecting it.
You should be able to see my style sheet at the link below, it's pretty tiny but I figured I'd let you guys see it all instead of the specific lines I'm talking about because I believe there could be a conflict.
http://coreytegeler.com/new/css/style.css
#shadow {
width:33%;
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
#shadow:hover {
-webkit-transition: all 2.2s ease-in-out;
-moz-transition: all 2.2s ease-in-out;
-o-transition: all 2.2s ease-in-out;
transition: all 2.2s ease-in-out;
}
Your code is not working on :hover because you simply change source of img. CSS has nothing to do with it.
You can place image in a div and set other image as div's background-image. Then on hover just reduce opacity to 0.
Demo
EDIT
In future you can use CSS filter property. Currently its supported by just -webkit. It'll be as simple as
img {
filter: invert(100%);
}
and you're done. But currently its just
img {
-webkit-filter: invert(100%);`
/*-moz -o -ms all are unimplimented*/
}
Proof of concept (Use chrome or safari to see the effect)
+filter(W3C)
I am seeing an interesting bug in chrome regarding CSS transitions.
The page flickers during the transitions. For now i have only seen this in Chrome.
You can see this on my porfolio: www.dkhalife.com
Just scroll down to the skills sections and hover over any of the social icons on the right repeatedly, you can't miss it...
The CSS transition code is mainly :
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
And basically i am just changing the opacity and margin using a hover pseudo class.
I have tried:
-webkit-backface-visibility: hidden;
As mentioned on some other questions on SO but it doesn't seem to fix my problem.
Any help is appreciated.
Instead of
-webkit-transition: all 500ms;
animate just the properties you want to change
-webkit-transition: opacity,margin 500ms;
Do you guys have an idea why the following CSS3 transition does not work in Opera, even though -o-transition was used? Firefox and IE 10 render the menu item correctly:
http://jsfiddle.net/JYLZ3/
You could try the following syntax instead:
-o-transition-property: background-color;
-o-transition-duration: 4s;
I just modified the fiddle and this indeed works in Opera 11.62. In fact, it appears you could just use the shorthand form, but include -color to make it work with Opera:
-o-transition: background-color 5s;
Source: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
This is fixed in Opera 12 alpha. -o-transition: background 5s will work.