I'm using LESS to style a web page (with Bootstrap). What I'd like to do is add a smooth color transition when I hover my mouse over an element. Doesn't this functionality come right out of the box in LESS?
I'm trying to do it like this:
.list-group {
.list-group-item:hover {
background: fadein(#cn-sidemenu-hover-bg, 100%);
}
.list-group-item {
background: #cn-sidemenu-bg;
color: #fff;
}
}
But this has no color animation. But the name kinda implies to me that this should do some sort of color animation?
Otherwise I don't see any difference between fadein and lighten..
How can I do a smooth color transition with LESS?
You will need to add a transition attribute to the .list-group-item class like:
.list-group-item{
background: #cn-sidemenu-bg;
color: #fff;
transition: background 500ms;
}
Transition tells the browser to interpolate between two defined attributes. fadein and lighten are LESS specific functions, that only process the color value resulting in a fixed color value.
i.e. this
lighten(#aa0000, 5) would result in the color value #c30000;
fadein does the same thing of color manipulation, but edits the opacity value.
Related
I am curious if there is an industry standard for transitioning colour since there are multiple ways to accomplish the desired transition effect.
There are multiple ways to make a particular colour brighter or darker to indicate to the user that the element is intractable.
For example, if you have a p tag and you want to add a hover over effect you could:
HTML
<div><p> P tag text </p></div>
CSS v1 using opacity
div {
background-color:black;
}
p {
color: white;
opacity: 0.8;
transition: opacity 0.2s ease-in-out;
}
p:hover {
opacity: 1;
}
CSS v2 using colour
div {
background-color:black;
}
p {
color: #ccc;
transition: color 0.2s ease-in-out;
}
p:hover {
color: #fff;
}
As far I'm aware both methods provide similar results however, I am still curious whether or not there is a correct way to do this kind of thing.
The main thing you should realize is that opacity affects an entire element and all its descendants, whereas color and background-color do not.
In your simple example, white text with reduced opacity on a solid black background looks gray, so the visual effect is basically the same as changing the color from gray to pure white.
But in any more complicated example – say, the background of your paragraph's parent div is an image rather than a solid color, or you're using opacity on an element that contains other elements and not merely on text – what you're gonna end up with is things that truly look see-through. That also may mean that text becomes harder to read.
So the answer is less about there being any particular industry standard and more about choosing the right tool for the job. If you just want to make some text a lighter color, transition color itself. If you want to make things see-through, use opacity.
That's the theory, anyway, but in real life sometimes it's not that clean cut. Maybe a designer gives you a mockup with text that's color: #C44242; opacity: 0.87 on top of a solid-colored background that's background-color: #B48927. You could compute what the opaque version of that text color would be, but it may not be worth your time to do so. The world won't end if you just stick with opacity.
I'm learning CSS3. Now, what I've seen in w3schools website is that:
CSS
#ID {
transition: transform 3s;
}
#ID:hover {
transform: rotateX(20deg);
}
And what I did is this:
CSS:
#ID:hover {
transform: rotateX(20deg);
transition: transform 3s;
}
Both are working. So, the question is: Can I put both transition and any transformation property in same selector? Or is it not the right way?
SHORT ANSWER:
If you define your transition property in element:hover, it will only get applied in that state.
EXPLANATION:
Whichever CSS properties you define in element:hover will only be applied when the element is in the hover state, whereas whichever CSS properties you define in your element will be applied in both states.
Transition property declared in normal state:
See how the transition always runs when the element's state is changed. When you stop hovering the element it will still make the transition back to its normal state.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
transition: transform 1s;
}
#ID:hover {
transform: rotateX(60deg);
}
<div id="ID"></div>
Transition property declared in hovered state:
See how the transition breaks when you stop hovering the element and it jumps to its normal state immediately.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
}
#ID:hover {
transition: transform 1s;
transform: rotateX(60deg);
}
<div id="ID"></div>
The first example is generally correct, as the transition timing is stated on the unaffected state. But that's based on the majority of examples I've seen of how to generate transitions on hover actions.
1st case :
All your transition in the #ID will have a transition of 3s.
When you hover your #ID, your transformation is rotateX(20deg).
2nd case :
When you hover your #ID, you have a transition of 3s.
Overall :
All the transitions from the first css will have a duration of 3s. Then you can apply transitions on your #ID from different places. Whereas in your second case you separate them and if you want to have another transitions triggerd by something else than hover, you will have to specify the duration again.
Both are correct
When a transition is specified for the :hover state, the transition won’t work on mouse out.
I'm trying to modify the text's color when hover with multiple color transitions but I can only change one color. Here is my CSS snippet.
#text {font:9px 'Arial'; color:#000000; transition-duration: 3s;}
#text:hover {color:#FFFFFF;}
Not just #000000 to #FFFFFF, but #000000→#FF0000→#0000FF→#FFFFFF
How to have multiple CSS color transitions on a single text line?
You need to use CSS Animations which allow you to use keyframes to define multiple state changes.
Your example would look like this:
#text:hover {
animation: 3s multicolor;
}
#keyframes multicolor {
0% {
color: #000;
}
33% {
color: #FF0000;
}
66% {
color: #0000FF;
}
100% {
color: #FFF;
}
}
Here's a demo fiddle that includes the -webkit prefix (omitted in the answer for brevity)
I would suggest checking out animation keyframes for CSS animations. You are able to specify the state of your text at whatever intervals you like (in this case, define your text color). W3 Schools has more info on the subject, take a look here: http://www.w3schools.com/css/css3_animations.asp
I want to change the background color of the page when one hovers over a button/div tag using only CSS3 transitions. I want the color to come gradually and hence would like to use a transition effect, but I don't know how to relate the background color of the page to a hover event on a div. Can someone please help me with my code ? Thank You
This is not currently possible in CSS3.
In the future (CSS4?), you'll be able to do it as follows:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
Note the $ in the second selector; It indicates which element the CSS block applies to. Unfortunately, there's not even a single implementation of this yet, so you'll have to resort to Javascript (which I assume you know how to do. If not, just ask).
Update (using jQuery):
CSS:
body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascript:
$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
Here's the fiddle: http://jsfiddle.net/mWY88/1/
For maximum efficiency, you should cache your selectors.
In fact, you can change the body background-color very easily with CSS3 transition animation like I'm doing it here. I got the logic from here.
As far as I understand, there is no such thing we can implement using css transitions, but we can not to implement using css animations, but not vice versa.
That is, any transition has a css animation equivalent.
For example, this one
.ablock:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
color: red;
background-color:pink;
}
is an equivalent of following:
.ablock:hover {
-moz-animation-duration:1s;
-moz-animation-name:transition;
-webkit-animation-duration:1s;
-webkit-animation-name:transition;
}
#-moz-keyframes transition {
to {
color: red;
background-color: pink;
}
}
#-webkit-keyframes transition {
to {
color: red;
background-color: pink;
}
}
My question is - if we a talking about browser supporting both css transitions and animations, what are use cases for choosing one or another approach?
As for transitions, I can name only one - they have more succinct syntax, we don't have to copy paste huge chucks of code for #-moz-keyframes, #-webkit-keyframes and so on.
As for control from javascript, flexibility and complexity animations are much more appropriate tool (at least, at first glance). So, what are use cases?
UPD:
OK, let me try to list interesting info found in questions.
This one is contributed by Roman Komarov. Say, we have a div and child div. While parent div is hovered, we are transitioning the child element. Once we are taking away the mouse, transition is cancelled. Duration of this cancellation is exactly the time we've already spend for transitioning. Animation is cancelled "immediately". I don't know, nevertheless, how standard are those two behaviours.
Animations can be looped (and there can be keyframes, yeeah).
Transitions can be more flexible and you can easily make transitions to different values and in different circumstances.
While you can emulate some transitions by animations (like you mentioned in your post), the transitions are just more powerful:
You just tell which properties you must animate and in which conditions (using the different selectors)
You can trigger the transition in different ways:
Changing properties in CSS for pseudo-classed :hover, :active etc. (Creating pure CSS UI)
Changing properties in different classes for different purposes.
Changing properties in inline styles: in conjunction with JS it's just more powerful than animations.
With transitions you are able to transition between any value of the defined property, which you want to be transitioned. As an example, you want to transition the color of a link, when it's hovered and active:
a {
color: #000;
transition: color .4s ease;
}
a:hover {
color: #888;
}
a:active {
color: #faa;
}
You are independent, which color you choose.
Now if you want to use the animation style, you have to explicitly set the color value for the animation states. And you are not able to easily animate between the three states: normal, hover and active. You need more complex definitions. I'll try this one with animations:
a {
color: #000;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toDefault;
}
a:hover {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toHover;
}
a:active {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toActive;
}
#keyframes toDefault {
to {
color: #000;
}
}
#keyframes toHover {
to {
color: #888;
}
}
#keyframes toActive {
to {
color: #faa;
}
}
Now this does not include the animation back to the state before. I'm not sure if you can even fetch that.
So in short: with transitions you are able to animate an undefined set of properties and values, whilst keyframe animations are used for well defined animations and/or transitions.