I'm trying to have a css transition take place on a link upon hover. The text of the link should change color as well as a child span's color. It's happening except the span transition appears to start only when the first transition completed. Any ideas?
<div class="transition">
<a href="#">
Click here
<span class="glyphicon glyphicon-play pull-right"></span>
</a>
</div>
.transition a,
.transition span {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
I tried separating the classes into two which made no difference.
EXAMPLE: JSFIDDLE
The transition will cause the color to change for its children, so they will begin the transition again and again. Try to not transition inside a transition with the same property. If you want the color of the span to change with the parent, use color: inherit; without transition on the span.
Just a fiddle as an example: JSFIDDLE
.transition a {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}
Related
I am trying to apply an ease in ease out (with a fade) in the navigation as it scrolls between each section of my one page scrolling site. It is currently working on the transition from the first section (welcome) to the second section (mission).
I am using squarespace and am doing custom CSS overrides to the elements I want to change. I can see that there are some negations in squarespace's CSS for the transitions, is there a way for me to override this?
Demo Site
The code is as follows:
body:not(.always-use-overlay-nav) .nav-wrapper nav>div a,
body:not(.always-use-overlay-nav) .nav-wrapper nav span>div a,
body:not(.always-use-overlay-nav) .nav-wrapper nav>div label,
body:not(.always-use-overlay-nav) .nav-wrapper nav span>div label {
-webkit-transition: color .1s 0s ease-in-out;
-moz-transition: color .1s 0s ease-in-out;
-ms-transition: color .1s 0s ease-in-out;
-o-transition: color .1s 0s ease-in-out;
transition: color .1s 0s ease-in-out;}
For some reason all of the transitions are being "crossed-out" when I inspect the element on my site.
I am using twenty fourteen theme for my WordPress blog.
It's a travel blog still in development... never mind the content though.
Anyway, I have one sub-menu on the main menu.
The site is:
http://www.journeywithandrew.com/
so if you scroll over "WORLD HERITAGE SITES: REVIEWS & INFO" on the menu, you will see a sub-menu appear with two items: "map view" and "list view"
My question is: I am using a css easing-in background effect on the main menu as you can see when you hover over the menu items. However, the sub-menu does not ease in - it just appears.
I would like the sub-menu to also ease in to match the transition time of the main menu (0.3s)
Any ideas? I tried to plug in the CSS code into places using chrome's dev tools, but nothing worked.
thanks!
code:
a {
-o-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
-ms-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
-moz-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
-webkit-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
}
css property attibute auto not spported by transition property a nice alternative would be to use opacity
.primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul{
opacity:1;
}
.primary-navigation ul ul{
transition:all 0.3s ease 0s;
opacity:0;
}
Demo
hover
<p>Text here</p>
I want the <p> to fade in and slide in when the <a> is hovered. Problem is, with the CSS in the demo, the <p> just "pops" in rather than animating.
The transition shorthand doesn’t support multiple properties in the same place:
transition: max-height .5s ease, opacity .5s ease;
You also need overflow: hidden to make it look like it’s sliding. Updated demo
You need to comma seperate the properties you want to transition:
p {
opacity: 0;
max-height: 0;
transition: max-height .5s ease, opacity .5s ease;
}
http://jsfiddle.net/pZngX/
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 ?
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