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 am creating a navigation bar and I am having issues getting the hover's background color to take place of the entire area I want it to be in. I want it to be the entire block of the list item as well as the padding I have created. Right now it is only changing the color of the link's title name.
I created a fiddle to show what is happening.
https://jsfiddle.net/aqdw7mh3/
I have tried adding width: 100%; to:
.spectator_nav li:hover ul {
display: block;
}
and
.spectator_nav li a:hover {
background-color: #282828;
-o-transition:color .4s ease-out, background .3s ease-in;
-ms-transition:color .4s ease-out, background .3s ease-in;
-moz-transition:color .4s ease-out, background .3s ease-in;
-webkit-transition:color .4s ease-out, background .3s ease-in;
/* ...and now for the proper property */
transition:color .4s ease-out, background .3s ease-in;
}
This did nothing to help my case. What am I missing?
Set a to the size of the block. This way, it will fill up the block and the background will too.
Removed/changed some things but hopefully this is what you're after: https://jsfiddle.net/aqdw7mh3/4/
I have this site:
http://test2.dac-proiect.ro/wp/
I want to change the text color "Nike" to white.
If you change this text and change the name of the product and do not want this.
a {
color: #F7F6F6;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
Here's an image to better understand what my needs are.
http://i62.tinypic.com/2b41uw.png
Try with this piece of code.
.wb-posted_in a {
color: white;
}
Tell me if works
I am working on CSS 3 transition effect for navigation menu.I want to have opacity effect for the submenu on hover of the menu.And Its working.
But the problem is that I want to show submenu on hover of menu item.But in my case with the following code, submenu is opacity effect works on hover of submenu as well.
#mega-menu-wrap-primary-2 #mega-menu-primary-2 > li.mega-menu-megamenu > ul.mega-sub-menu {opacity:0 !important;
display:inline !important;
transition: opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;}
/*for transition*/
#mega-menu-wrap-primary-2 #mega-menu-primary-2 li {}
#mega-menu-wrap-primary-2 #mega-menu-primary-2 > li.mega-menu-item:hover > ul.mega-sub-menu {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
opacity:1 !important;}
NOTE: I am having submenu with 660px height.And also I am using wordpress.So I can't show you on JSFiddle.
What might be the issue here ?
Tell me if you have doubt related to this question.Thanks.
I have a menu created with ul/li lists.
To create a nice effect, I have the following css:
#menu ul {
/* ... */
visibility:hidden;
/* ... */
}
#menu li:hover > ul {
/* ... */
visibility: visible;
/* ... */
}
You can view the full code here: http://www.red-team-design.com/css3-animated-dropdown-menu.
The menu works fine without any issues unless I embed a Youtube video (e.g. a random video - <iframe src="http://www.youtube.com/embed/e80qhyovOnA?rel=0" frameborder="0" width="420" height="315"></iframe>).
I have troubleshooted the problem to the visibility css property and when using Chrome.
Is there a way I can change the CSS to keep the bouncing effect?
Replacing this with display:none works but it looses the bouncing effect. There seems to be a conflict with Youtube's code. Ideally I do not touch anything within the iframe unless it is automated as videos are embedded via WYSIWYG.
Thank you.
Youtube CSS makes something wrong with transitions, so, just change
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
to
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
It helps me a lot.