It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet:
.nav a
{
text-transform:uppercase;
text-decoration:none;
color:#d3d3d3;
line-height:1.5 em;
font-size:.8em;
display:block;
text-align:center;
text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
.nav a:hover
{
color:#F7931E;
text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
As you can see, the transition properties are overwriting eachother. As it stands, the text-shadow will animate, but not the color. How do I get them both to simultaneously animate? Thanks for any answers.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease is the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:
transition: color .2s linear, text-shadow .2s linear;
This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-* properties instead of the shorthand:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
EDIT: I'm torn on whether to delete this post. As a matter of understanding the CSS syntax, it's good that people know all exists, and it may at times be preferable to a million individual declarations, depending on the structure of your CSS. On the other hand, it may have a performance penalty, although I've yet to see any data supporting that hypothesis. For now, I'll leave it, but I want people to be aware it's a mixed bag.
Original post:
You can also simply significantly with:
.nav a {
transition: all .2s;
}
FWIW: all is implied if not specified, so transition: .2s; will get you to the same place.
If you make all the properties animated the same, you can set each separately which will allow you to not repeat the code.
transition: all 2s;
transition-property: color, text-shadow;
There is more about it here: CSS transition shorthand with multiple properties?
I would avoid using the property all (transition-property overwrites 'all'), since you could end up with unwanted behavior and unexpected performance hits.
Something like the following will allow for multiple transitions simultaneously:
-webkit-transition: color .2s linear, text-shadow .2s linear;
-moz-transition: color .2s linear, text-shadow .2s linear;
-o-transition: color .2s linear, text-shadow .2s linear;
transition: color .2s linear, text-shadow .2s linear;
Example: http://jsbin.com/omogaf/2
.nav a {
transition: color .2s, text-shadow .2s;
}
It's possible to make the multiple transitions set with different values for duration, delay and timing function. To split different transitions use ,
button{
transition: background 1s ease-in-out 2s, width 2s linear;
-webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}
Reference: https://kolosek.com/css-transition/
Here's a LESS mixin for transitioning two properties at once:
.transition-two(#transition1, #transition1-duration, #transition2, #transition2-duration) {
-webkit-transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
-moz-transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
-o-transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
}
It's also possible to avoid specifying the properties altogether.
#box {
transition: 0.4s;
position: absolute;
border: 1px solid darkred;
bottom: 20px; left: 20px;
width: 200px; height: 200px;
opacity: 0;
}
#box.on {
opacity: 1;
height: 300px;
width: 500px;
}
In Sass you can achieve using below code
#mixin transition($transitions...) {
$unfoldedTransitions: ();
#each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
}
-webkit-transition: $unfoldedTransitions;
transition: $unfoldedTransitions;
}
#function unfoldTransition ($transition) {
// Default values
$property: all;
$duration: .2s;
$easing: null; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist
$unfoldedTransition: ();
#for $i from 1 through length($defaultProperties) {
$p: null;
#if $i <= length($transition) {
$p: nth($transition, $i)
} #else {
$p: nth($defaultProperties, $i)
}
$unfoldedTransition: append($unfoldedTransition, $p);
}
#return $unfoldedTransition;
}
// Usage: #include transition(width, height 0.3s ease-in-out);
All credit goes to tobiasahlin
https://gist.github.com/tobiasahlin
I'm trying to give my flat icons a nice smooth scale effect on hover. I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
Thanks,
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
transition: all .2s ease-in-out;
}
.flaticon-city:hover {
transform:scale(1.3);
}
and this doesn't work either:
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
}
.flaticon-city:hover {
transform:scale(1.3);
transition: all .2s ease-in-out;
}
I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
The issue is simply that you specified transition for .flaticon-city:before, but apply the transform on .flaticon-city:hover.
Edit:
It “doesn’t work” in your example, because you have a problem with specificity:
#page-content #services .service i {
/* … */
transition: color .4s ease;
}
.flaticon-city:hover {
transform: scale(1.3);
transition: all 2s ease-in-out;
}
The first rule as higher specificity than the second one, but they both apply to the same i element that holds your icon – and therefor, you have now specified color as transition property only (because you have overwritten the transition), so changing the transform is not transitioned any more.
Just combine the two transitions into one:
#page-content #services .service i {
transition: transform 2s ease-in-out, color .4s ease;
}
So, I've barely done any design and am trying my hand at it, but I guess I'm thinking of things wrong when it comes to using class and id in my html and css since I'm thinking of it from a programming perspective. I was thinking of class as a sort of parent class and id representing a child, where they can inherit properties while at the same time having their own; however, though in some regard this seems to work, my transitions don't work as I expect them to when I hover over them.
I have an unordered list of buttons like this
<li><button type = "button" id = "first">Press Me</button></li>
and this css:
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
#first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
#second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
#third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#9bffcd;
}
For first only the color transition works, for second only the border transition works, and for third only the background and color transitions work. It seems that the transitions only work for the properties I haven't overridden. Is there anyway of preserving these transitions while keeping their individual properties? I might override these transitions for other buttons, but I was just curious how I would go about maintaining it for some. Thanks
While writing reusable code always prefer to class rather that id which will help you to override the properties very easily and you don't have to be explicit.
So, here is example as you need. I think it will work for you.
HTML
<button type="button" class="first">Press Me</button>
<button type="button" class="second">Press Me</button>
<button type="button" class="third">Press Me</button>
CSS
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
.first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
.second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
.third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#fff;
}
Link to Fiddle .
Have a nice code day.
Put the pseudo :hover selector to each button ID selector.
Try: #first:hover { ... } #second:hover { ... } #third:hover { ... }
My site address is http://applocity.blogspot.com/
I have a navigation bar (#cssmenu if you want to find it in the source code) and for some odd reason this is occurring: I made it so the links change colors upon hover and that works fine. But I wanted to add a transition so the background-color changes colors by fading in and out. This works fine on Chrome but it only works on the sub-links (e.g. under device and category) on Firefox. I have not been able to figure out why this happens.
#cssmenu a {
background: #999999;
color: #FFF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
padding: 0px 25px;
//border-radius: 5px; (NOT ACTIVE)
}
#cssmenu ul li:hover > a {
background: #66FF99;
color: #000000;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition:background 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
(There is more on the source code of the site--CTRL+F #cssmenu)
What I've tried so far:
Putting background-color instead of background
Using -moz-transition...of course
Re ordering and placing where I put the transition attributes in the CSS code (e.g. under #cssmenu as well as #cssmenu:hover.
I figured it out. Here is the link to my solution. http://jsfiddle.net/mrytF/2/
The problem was coming from lines 59-61. You had this code:
.cssmenu a {
-moz-transition: background 1s ease;
}
When .cssmenu doesn't exist. So I commented this code out, and it works fine now in firefox. I also commented out some CSS that I thought was redundant
Hope this helps
Edit
Fixed the problem with not having the sub-menu show. The main problem here was that you had line 22 as #cssmenu ul li.hover, when it needed to be #cssmenu ul li:hover.
Here is the fiddle
http://jsfiddle.net/mrytF/3/
Been trying to figure out how to create an L shape button using only CSS3. I've managed to do it by mirroring a rectangle to create the shape but I am also trying to implement a hover effect on the button as well. It works only on the main rectangular shape.
Any ideas on how to go around this or possibly a more efficient way of executing this problem.
here's the jsfiddle:
http://jsfiddle.net/kryon17/kpRKA/
Not sure if this is what you needed, but I recreated it using borders. Let me know if this solves your problem.
HTML
CSS
a {
margin:100px;
display:block;
width:50px;
height:50px;
border-bottom: 30px solid black;
border-right: 30px solid black;
}
a:hover {
border-color: #676767;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
Source | Demo