Using CSS transitions on most properties runs as expected, except this issue I am having with colours.
I have set up a demonstration pen here.
When transitions are instructed to change the color property, they all queue after each other instead of happening all at once.
This seems limited to webkit as IE and Firefox work as expected.
#change {
color: green;
transition: color 200ms linear;
}
.changed {
color: red;
}
I think it's because color is inherited property, and you use * selector for transition. You should set transition: color only to element you change color, for example (http://codepen.io/sergdenisov/pen/QbjjjP):
#container {
padding: 0;
transition: color 500ms;
}
#container * {
transition: margin 500ms;
}
Related
I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)
On most browser-os-constillations the standard background of the site is white, so if I create a website I at first set the background-color to something dark. But if I try and set the transition property on "*", the background also fades in, which, in my opinion, looks bad. How can I remove that?
*{
transition: 2s;
}
body{
background-color: #000
}
<html>
<body>
<p>Hi!</p>
</body>
</html>
if your point is to select all and avoid the body from transition
you can use :not(body) :
:not(body){
transition: 2s;
}
body{
background-color: #000
}
I can't seem to be able to replicate the fade transition of the background you're describing.
However, if you need to exclude a specific element and/or property from animating, you can do it like this:
To exclude an element:
*:not(body) {
transition: all 2s;
}
To exclude a property:
* {
transition: all 2s, background-color 0;
}
Or to prevent the transitioning of background-color on the body:
* {
transition: all 2s;
}
body {
transition: all 2s, background-color 0;
}
I have some css that gradually changes the background colour of an element when hovered on and the links below it.
It works perfect in Chrome and IE9+ but in FF it only works on the element you hover on and it instead immediately changes the colour on the elements below
EXAMPLE
I'm guessing the problem lies somewhere here:
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
What do I need to change/add to get it to work properly in FF
Try setting the same transition on the element(s) below as well.
I'm guessing you want the lines in your example to have the same effect. I've updated the example with this JsFiddle.
Edit:
I added the transition CSS to all classes that handles the border you use to draw the lines
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
My blog simulates a terminal screen, so normal text is green and links are in red with a red background when the mouse is over. Since I use a monospaced font throughout the blog, <code> is styled to have a green background to differentiate from regular text. Likewise, <code> inside <a> has a red background that turns darker when the mouse is over. See this test page for a live version.
Here is the CSS (complete file here) for <a> tags:
a {
color:#CD0000;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a:hover {
background-color:#440000;
}
And for <code> tags inside <a> tags:
a code {
/* Only apply this to code that is a hyperlink */
color: #161616;
background-color: #CD0000;
border-radius: 5px;
padding: 0 2px 0px 2px;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a code:hover {
background-color:#440000;
border-radius: 5px;
padding: 0 2px 0px 2px;
}
The problem is that when I mouse over a link such as <a href='#'><code>long code</code></a>, the backgrounds of both the <code> and the <a> tags are transformed. Here are two images that illustrate this. In the first image, I managed to put the pointer of the mouse only over the <a> element. In the second, the mouse is over the <code> element:
Is there a way to style <code> links differently from normal links? Thank you in advance.
I think you're looking for the contains() selector, which is no longer part of the css3 selector spec
To achieve this, you will want to look at either a js framework solution, like has() in jquery or a dynamic css solution, such as less
I've a div like this:
.x{
...
}
And a sort of "submenu" initially hidden:
.x_submenu {
...
display:none;
...
}
The submenu will be visible only when the user is on the x div:
div.x:hover .x_submenu {display:block; }
Now, I'd like to make it visible with a transaction or an effect that makes the visibility more "slow".
Is there a way to achieve that goal, possibly with a cross-browser solution?
Thanks,
A
The best option is with opacity:
HTML:
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
Css:
div
{
opacity:0;
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
opacity:100;
width:300px;
}
see demo: http://jsfiddle.net/wyKyT/
you won't be able to make transition work on 'display' property.
You will have to achieve this using the 'opacity' property.
Related to :
Transitions on the display: property
-webkit-transition with display
Jim Jeffers explained :
To work around this always allow the element to be display block but hide the element by adjusting any of these means:
Set the height to 0.
Set the opacity to 0.
Position the element outside of the frame of another element that has overflow: hidden.
and, for your transition, to make it 'cross-browser' :
.transition {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
No, there is not. CSS transitions work only for scalar values, so they can be applied to properties dealing with dimensions, colors (as these are represented in rgb values as well), opacty, etc. Other values like display, float, font-family etc cannot be transitioned as there are no possible intermediate states to display. You will have to fall back to using JavaScript or try to work with properties like opacity or applying workarounds like height: 0 to height: 100px
you can change display: none; to opacity: 0; (keeping in mind all browser compatibilities), and display: block; to opacity: 1;
the transition should work. And should you wish to make the items invisible to the mouse (unclickable or undetectable) while they are at 0 opacity, you can add
pointer-events: none;
together with the strip where it is at opacity: 0; and
pointer-events: auto;
where it is visible.