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 discovered CSS transitions this morning on StackOverflow (I'm a newer web developer, mind you.) and I was trying to re-vamp one of the sites that I'm currently building, by adding a nice fade-in effect on my link color changes & my div hover effects on my page. The effect works very nicely, but I'm noticing a weird delay that hopefully someone can help me out with.
The Problem: When I have nested elements that should both receive a transition, they aren't happening simultaneously, they are waiting for the parent transition to stop and then the child transition begins.
HTML: Note - This is razor text normally, but I have provided the raw HTML without any C# syntax
<div class="image-caption">
<h1>Heading</h1>
<p>Hello world, I am an example paragraph.</p>
<a href="#" target="_self">
<div class="image-link">
Link Text!
</div>
</a>
</div>
CSS / LESS:
I was looking for a way to quickly convert all div & link effects on my site to fade smoothly. I found the code below on StackOverflow and noticed that if I didn't include the :hover & :focus selectors, that all of the links on the page would transition from a pretty large size down to their normal size when the page loaded which looked funny.
div, a, i{
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
And here is the code for the actual styling of the caption.
.image-caption {
//irrelevant CSS removed here
a {
&:hover, &:focus{
color: rgba(19, 56, 97, 1.0);
.image-link{
border-color: rgba(19, 56, 97, 1.0);
}
}
}
}
Use transition property directly on selectors (not on hover and focus states)
div, a, i {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
I was able to make it work by removing the DIV declaration on the global DIV / I / A transition rule, and then creating a couple of mixins to handle independent transition cases like this.
New Global Rule & Mixins:
a, i {
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
.no-fade() {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.make-fade() {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
New CSS / LESS to fade nests at the same time: - (for clarification, .image-link is a DIV)
a {
font-family: 'Source Sans Pro';
color: #FEFEFE;
text-transform: uppercase;
font-size: 18px;
&:hover, &:focus {
color: rgba(19, 56, 97, 1.0);
.no-fade();
.image-link {
.make-fade();
border-color: rgba(19, 56, 97, 1.0);
}
}
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/
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