I'm working on a website that uses transformations and transitions. The problem is that if I zoom in/out the divs with transitions will get moved slowly instead of getting moved instant(just in Chrome and Opera). Is there an easy fix to it or is it just a problem with Chrome/Opera?
Here the CSS code that I use(just copy it in a div tag):
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
Related
I have the following CSS transition rule:
.headroom {
-ms-transition: transform 200ms linear;
-webkit-transition: transform 200ms linear;
transition: transform 200ms linear;
}
But latest version of Safari (8.0.6) is not detecting the transition rule:
Why? What am I doing wrong?
Solved it. I had to add prefix like followed:
-webkit-transition: -webkit-transform 200ms linear;
Annoyance.
got this mysterious error on hover (and click) when i hover over an image in Safari 7.06 (haven't tested other versions). Other browsers doesn't seem to have this problem) This occurs only on the right column, it's a kind of masonry grid but can't find out what is going wrong..
Link: http://www.abouzahra.nl/interior-products/
Someone can figure this out? Would be great!
Hope you guys can help,
Cheers Joeri
Try putting the transition in the default state and only toggle the opacity on hover. Also try having the default with an opacity of 1.0.
.cols img {
opacity: 1.0;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cols img:hover {
opacity: 0.6;
}
How can i turn all css3 animations off in just Opera browser ?
I don't want to pickup them completly , just want to turn it off in opera.
You'll be looking at targeting just the opera browser, this is done with a prefix:
-o-transition: none;
So targeting a specific element would have the following:
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: none;
transition: all 0.5s ease-in-out;
}
But your transition might be different without looking at a fiddle of your html and css.
At least, i used this code:
noindex:-o-prefocus, * {
animation : none !important;
-o-animation : none !important;
}
and problem is fixed.
I'm trying to get tabs (as a menu) to be offset the screen and when somebody hovers over it, it transitions downwards revealing more of the tab. My code is this:
.tab:hover {
position: relative;
top: 45px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
When I hover over the image, it does the transitioning downwards correctly. However, when I leave the tab, it snaps back into place. What I'd like it to do is transition back into its original place, not snap. What am I missing from the code to make this happen?
UPDATE:
I figured out the problem. I made a new CSS style set for just .tab and I put in the transitioning AND top: 0px.
Instead of putting it on the :hover, put the transition on .tab.
I have in my CSS file the following code, which globally turns on transitions on all links for all CSS properties on anchor elements:
a{
display:block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
Later in CSS file, I would like to turn off transition on specific links (let's say with class notrans) but only for background-position.
Something like:
a.notrans{
-webkit-transition: background-position 0;
-moz-transition: background-position 0;
-o-transition: background-position 0;
-ms-transition: background-position 0;
transition: background-position 0;
}
But this code does not work.
I must turn background-position transition and keep other transitions, so sprite - background image would not move on a.notrans ...
You just have to declare new property for transitions, and old inherited ones are gone.
So, i just used this>
a.notrans{
-webkit-transition:color .2s;
-moz-transition:color .2s;
-o-transition:color .2s;
-ms-transition:color .2s;
transition:color .2s;
}
After this, only color transition is working!
Maybe there is better solution ?