"Shaky" CSS3 transition with IE 11 - css

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)

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

CSS: transition + scale in non-absolute elements

I have a problem in this website:
http://www.bacubacu.com/paybus/
if you hover any of those 3 big round buttons at the bottom the animations works just great (they are absolute).
if you hover where it says "ver historial" the animation jumps to te beginning and stops, even if the "tap" class is still active. I've found out that it is related to the element positioning (being non-absolute).
I have no idea why this is happening, any of you can help me to solve it?
this is the CSS code:
.touch{
transition: transform 0.15s ease-out;
-webkit-transition: -webkit-transform 0.15s ease-out;
}
.touch.tap{
-webkit-transform: scale3D(0.9,0.9,0.9);
}
Ok, I found the answer myself. it gets fixed when adding "display:inline-block" to the anchor element. I didn't know where the problem was, sorry if my question was not too specific (my english doesn't help either hehe).
https://jsfiddle.net/15ryknk5/10/
display:inline-block;
I think you mean click instead of hovering. To hover is to place the cursor over the element. That is a different event than clicking. Also I think your css is wrong. I don't know if you can pass transform as a parameter of a transition. FInally I saw you Jquery and it seems to run on click. Try this code
HTML
<div id="tap_buttom" class="touch">
<p>This is a button</p>
</div>
CSS
.touch{
border-radius: 10px;
background: #ececec;
padding: 10px;
width: 150px;
text-align: center;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
/* Line added by Alvaro Prieto */
display: inline-block
}
.touch.tap
{
-webkit-transform: scale3D(0.9,0.9,0.9);
-moz-transform: scale3D(0.9,0.9,0.9);
-o-transform: scale3D(0.9,0.9,0.9);
-ms-transform: scale3D(0.9,0.9,0.9);
transform: scale3D(0.9,0.9,0.9);
}
jQuery
$(document).ready(function(){
$(this).mousedown(function(){
$("#tap_buttom").addClass("tap")
})// end click function
$(this).mouseup(function(){
$("#tap_buttom").removeClass("tap")
})// end click function
})// end document.ready
You can run this code here https://fiddle.jshell.net/15ryknk5/. I hope this works

Rotate pseudo element with transition not working in Safari

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

img:hover transition not matching given variable

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)

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