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.
Related
So i have this image and i want to increase the saturation of it when hoovering.
This is the class of the image:
.trans {
-webkit-filter: saturate(70%);
-webkit-transition: saturate 2s ease;
-moz-transition: saturate 2s ease;
-o-transition: saturate 2s ease;
-ms-transition: saturate 2s ease;
transition: saturate 2s ease;
}
.trans:hover {
-webkit-filter: saturate(190%);
}
The hoover is working and the saturation is increased, but the transition is instant and doesn't take the 2 seconds (or other value that i put). I've noticed that in this website i tried another hover effect (blur an image) and i have the same problem.
What can i do?
I believe you need to use "filter" or "-webkit-filter" as the target of the transition, e.g.
.trans {
-webkit-transition: -webkit-filter 2s ease;
transition: -webkit-filter 2s ease;
}
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 using a bunch of elements to compose a background image and they all absolutely position around, rotating freely.
Problem is, I would like to transition only the rotation of those objects, not the top nor left properties. And apparently transition: transform 30s; isn't allowed. I had the brilliant idea of doing
transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;
But that also doesn't work. How can I solve this?
Transform is a vendor prefix
Instead of
transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;
do
-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition: -moz-transform $amount-of-time ease-out;
-o-transition: -o-transform $amount-of-time ease-out;
-ms-transition: -ms-transform $amount-of-time ease-out;
transition: transform $amount-of-time ease-out;
To animate only the rotate property, I found this works in at least Chrome:
transition: transform 2.0s;
You can set different animation times for different properties inside the one transition property:
transition: transform 2.0s, color 5.0s, font-size 1.0s;
The trick with the rotate property specifically is that you have use the transform property instead. Intuitively, this should work but does NOT work:
transition: rotate 2.0s; /* DOES NOT WORK */
Instead you have to use transform in place of rotate:
transition: transform 2.0s;
This is probably because rotate: 90deg is shorthand for transform: rotate(90deg)
Note
transition is now supported in the latest versions of all major browsers. I assume if you want more compatibility with older browsers, you might do something like:
-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;
I'd like to apply a CSS transition to all properties apart from background-position.
I tried to do it this way:
.csstransitions a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.csstransitions a {
-webkit-transition: background-position 0s ease 0s;
-moz-transition: background-position 0s ease 0s;
-o-transition: background-position 0s ease 0s;
-ms-transition: background-position 0s ease 0s;
transition: background-position 0s ease 0s;
}
First I set all properties to transition and then I tried to overwrite solely the transition for the background-position property.
However this seems to also reset all other properties - so basically none of the transitions seem to happen any more.
Is there a way to do this without listing all properties?
Here's a solution that also works on Firefox:
transition: all 0.3s ease, background-position 1ms;
I made a small demo: http://jsfiddle.net/aWzwh/
Hope not to be late. It is accomplished using only one line!
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
That works on Chrome. You have to separate the CSS properties with a comma.
Here is a working example: http://jsfiddle.net/H2jet/
You can try using the standard W3C way:
.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }
http://jsfiddle.net/H2jet/60/
Try this...
* {
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
a {
-webkit-transition: background-position 1ms linear;
-moz-transition: background-position 1ms linear;
-o-transition: background-position 1ms linear;
transition: background-position 1ms linear;
}
For anyone looks for a shorthand way, to add transition for all properties except for one specific property with delay, be aware of there're differences among even modern browsers.
A simple demo below shows the difference. Check out full code
div:hover {
width: 500px;
height: 500px;
border-radius: 0;
transition: all 2s, border-radius 2s 4s;
}
Chrome will "combine" the two animation (which is like I expect), like below:
While Safari "separates" it (which may not be expected):
A more compatible way is that you assign the specific transition for specific property, if you have a delay for one of them.
Try:
-webkit-transition: all .2s linear, background-position 0;
This worked for me on something similar..
So I have the following CSS transitions attached to an element:
a {
-webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
transition:color 0.1s ease-in, background-color 0.1s ease-in;
}
Is there a way to disable these inherited transitions on specific elements?
a.tags { transition: none; }
Doesn't seem to be doing the job.
The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following HTML:
Content
Content
Content
Content
...and CSS:
a {
color: #f90;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a:hover {
color: #f00;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a.noTransition {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
JS Fiddle demo.
Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.
The specific adaptation to Opera is the use of -o-transition: color 0 ease-in; which targets the same property as specified in the other transition rules, but sets the transition time to 0, which effectively prevents the transition from being noticeable. The use of the a.noTransition selector is simply to provide a specific selector for the elements without transitions.
Edited to note that #Frédéric Hamidi's answer, using all (for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.
Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, following self-deletion of #Frédéric's answer.
If you want to disable a single transition property, you can do:
transition: color 0s;
(since a zero second transition is the same as no transition.)
Another way to remove all transitions is with the unset keyword:
a.tags {
transition: unset;
}
When used with the transition property, unset is equivalent to initial, since transition is not an inherited property:
a.tags {
transition: initial;
}
A reader who knows about unset and initial can tell that these solutions are correct immediately, without having to think about the specific syntax of transition.
Additionally there is a possibility to set a list of properties that will get transitioned by setting the property transition-property: width, height;, more details here
You could also disinherit all transitions inside a containing element:
CSS:
.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
HTML:
Content
Content
<div class="noTrans">
Content
</div>
Content
Based on W3schools default transition value is: all 0s ease 0s, which should be the cross-browser compatible way of disabling the transition.
Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp