I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition:
In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.
Any ideas on what causes this and how to avoid it?
http://jsfiddle.net/tTa5r/
.rotate{
background: green;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate.flip{
-moz-transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
}
the flip class is added/removed using jquery:
$('.rotate').on('click', function(){
$(this).toggleClass('flip');
});
-webkit-backface-visibility: hidden;
also worked for me... adding it to the elements I have transform on
p.s. I would vote the previous answer up but I cant as I dont have enough "reputation", nor can I see how to comment on it
adding
-webkit-backface-visibility: hidden;
to all affected elements, seems to help with that issue: http://jsfiddle.net/tTa5r/2/
while i'm not sure what this property excatly does
it seems to do something to the font rendering:
http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/
...not sure if i dislike that, though.
found here: iPhone WebKit CSS animations cause flicker
The backface-visibility property determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element.
In this case, it seems that it has the same effect as when you add:
-webkit-transform: translate3d(0,0,0);
Demo - http://jsfiddle.net/tTa5r/4/
which forces hardware acceleration giving you a slightly thinner (anti-aliased), but a more consistent font rendering before and after the transition.
There is a third option as well, and that is to add:
-webkit-font-smoothing: antialiased;
Demo - http://jsfiddle.net/tTa5r/3/
I answered a similar question before and #mddw posted a comment linking to a blog post that describes the methods of antialiasing which seems to be the reason for why you see a differens during and after the transition.
http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/
Hope that helps!
Related
I am using the "just me" effect from here, however I am having problems with Safari v5.1, it just doesn't render the modal. When inspecting I can see that the modal should be there but it just stays transparent. Is there any trick to force the browser to re-render?
EDIT: I have also checked the css properties that are being used and they are supported.
EDIT2: Here's the link in case it's hard to see http://tympanus.net/Development/ModalWindowEffects/ , I am using exactly the same code and the highest z-index.
To anybody interested:
In this case the transition is transition: all .3s ease; but Safari has problem when it has to transition opacity and visibility at the same time. Changing to transition: opacity .3s ease, transform .3s ease; (with all necessary prefixes) fixed it.
.faded{
opacity: 1;
}
This worked for me.
I have an element in an :after pseudo element. On click, this will rotate with a smooth transition.
Here is my code pen http://codepen.io/maxwbailey/pen/ABgJq - This works in Chrome, Firefox and Opera on a mac, but does not work on Safari.
My code...
HTML
<div class="expand"></div>
CSS
.expand:after {
content:"";
display:block;
width:200px;
height:200px;
background-color:red;
cursor:pointer;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
transition: transform 1s ease;
}
.expanded:after {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
jQuery
$('.expand').click(function(e) {
$(this).toggleClass('expanded');
});
Would like to know what I am doing wrong.
I have seen on this site, it is working fine in Safari http://www.barrelny.com/blog/ (Click on the 'View by Category' dropdown to see the arrow rotate with transition. I realise here they do not use a pseudo selector, but is there a way to do it with a pseudo class? As it works in other browsers just not Safari?
Also, this needs to be in an :after as the example I have given is a simplified version of the problem
Transitioning of pseudo elements is a fix that is slowly making its way into browsers.
I'm running the latest safari beta: v6.1 (8537.54.1) - it is working fine for me. Looks like you'll see the fix land soon.
CSS-Tricks has a post that is being updated as the fix lands: Transitions and Animations on CSS Generated Content
It is currently showing as unsupported for Safari 6.0.2 and down: Bug report
I am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.
Simple enough question:
Is it possible to leverage css transitions when it would would not be appropriate/feasible to trigger animations via pseudo selectors (ie :hover, :active, etc)?
My use case is I want something to animate after form submission. I was thinking I would be able to do something like:
.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }
Then using javascript, I would add the shown class to this element I want to animate.
Why not just use jQuery or similar to animate? I'm glad you asked. The CSS Transitions are much smoother on the iPhone and other mobile devices, which are the platforms I'm targeting. Currently I'm doing animations with jQuery, but they're just not as smooth as they could be.
Edited to clarify what I was asking about pseudo-selectors.
Everything should work as you expect. JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/
.success_message {
opacity: 0.0;
transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
}
.success_message.shown {
opacity: 1.0;
}
If this does not solve your issue, please include further code samples or browser specifics. Good luck!
Yes, you can do that. Css transitions work any time a css property changes, even if it was because the class changed.
I have a simple animation like this:
.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}
When I hover, it scales correctly. But just when it was about to finish, it suddenly pops back to the former size and then snaps to the completed scaled up version.
How do I fix this?
You have it a little bit wrong, you have to set the attributes a little differently:
.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }
You need to set the animation attributes on the element itself, and then the action on the hover :)
Working example (Webkit browsers only).