Rotate pseudo element with transition not working in Safari - css

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

Related

Image hover CSS for revolution slider

I'm using revolution slider and I'm stuck with a problem. As an example I use the original demo from here: https://revolution.themepunch.com/wordpress-photography-slider.
On the tab 'portfolio' you see images that shrink in size with a transition and look a bit darker when you hover over them. This is what I want as well but I can't figure out how.
In revolution slider you can add classes, ID's and CSS to specific images so what I probably need is a CSS code that makes this possible. I've tried several codes I found online but none of them do the trick because they all come with an html part as well.
My guess was: the image is already there, I don't need the html part, only assign classes or id's to the images and then give each image the same kind of CSS code.
Am I on the right track with this? And can anyone help me with the code for it?
Many thanks in advance!
add a class, then do some css
for example:
<img class="slider-img">
.slider-img:hover {
{
let me know if you need help with the css.
EDIT:
try this.
wrap each of your images around 2 divs, slider-img and img-wrap:
<div class="slider-img">
<div class="img-wrap">
<img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
</div>
</div>
then do some css:
.slider-img {
width: 200px;
cursor: pointer;
}
.slider-img img {
width: 100%;
}
.slider-img:hover .img-wrap {
background-color: black;
transform: scale(0.7);
-o-transform: scale(0.7);
-ms-transform: scale(0.7);
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.slider-img:hover .img-wrap img{
opacity: 0.5;
}
basically what the css is doing is that when you hover over the main div (.slider-img), the div containing the image (.img-wrap) gets scaled down by 70% by the css -webkit-transform: scale(0.7);
it also gets a background color of black with an opacity of 80%. this gives the darkened image effect.
-webkit-transition: all .5s ease-in-out; gives a smooth transition effect.
if you are wondering why there are 5 different lines of css for the same thing, thats because each line targets specific browsers. -o- is opera, -moz- is firefox etc.
also, make sure to change the .slider-img width to match your needs.
check out the working example on js fiddle:
here

"Shaky" CSS3 transition with IE 11

I've been working on a very simple effect: a slow zoom effect on hovering on a image, using CSS3 transition. It renders nice and smothly on every broswer I had the chance to test it (Mozzila, Chrome, Safari), but it is shaky when I use IE 11.
Here's the code:
html
<div class="container">
<img />
</div>
css
.container {
width:310px;
height:220px;
overflow:hidden;
}
img {
width:100%;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.zoom {
-webkit-transform: scale(1.06);
-moz-transform: scale(1.06);
-o-transform: scale(1.06);
transform: scale(1.06);
}
js
$(document).ready(function(){
$('.container').hover(function() {
$('img',this).addClass('zoom');
}, function() {
$('img',this).removeClass('zoom');
});
});
You can find the demo here:
https://jsfiddle.net/malambart/Leydw2tp/1/
If someone had a idea of how to fix this, I'll be glad to try it. However I'll be happy just to remove the animation for any version of IE. Sorry to ask something that may be obvious to many people but what is the best way to acheive that? I just learned about a library called Modernizr but as I understand it only tell me if a feature is available, not allow me to "turn off" features on some browsers. Am I wrong?
Many thanks!
Change your transforms:
scale(1.06);
Into:
rotate(0.1deg)scale(1.06)

Safari cannot rotate more than 360 deg

Can Safari 6.0.2 perform a rotation of more than 360 degrees? I have a simple experiment. Try it in Chrome release(not canary, will break, moz also will break) and Safari.
UPDATE:Since I found the solution, I have edited make it work properly in Chrome and Safari, but I still providing a improper version and proper version for compare.(note: Safari version is 6.0.2 at this time). BTW, I test in MAC only, not yet test in Windows
Improper version : Fail in Safari
Proper version : Simple Experiment
You cannot have multiple transform style at the same time when transitting , example
.chun {
-webkit-transform: scale(1.0); /*we want rotate, so remove this*/
transform: scale(1.0); /*we want rotate, so remove this*/
-webkit-transition: all .8s ease;
transition: all .8s ease;
}
.chun:hover {
-webkit-transform: rotate(-900deg); /*we want this to be rotate few cycle*/
transform: rotate(-900deg);
}
cannot have scale on normal state and rotate for hovering state.
This definetely is a bug(or something else) in safari, because Chrome can handle it properly.

css rotate with transition seem to affect other elements opacity?

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!

css3 simple animate with transform and transition, a sudden jump at conclusion?

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).

Resources