I have two elements in this jsFiddle. Each expands on mouseover with a :hover transition.
I want the blue animation to match the red one. Right now the red one expands over top of the blue one on mouseover, but the blue one expands under the red one. I would like each to animate over top of the other. This could probably be done by changing the z-index on :hover but that didn't seem to work very well.
Since you are animating all properties, the z-index animates and steps from 0 to 1 at the end of the animation.
Just animate the properties that you need and it works:
#a, #b {
width: 100px;
height: 100px;
position: absolute;
top: 0;
-webkit-transition: width .6s ease-in-out;
-moz-transition: width .6s ease-in-out;
-o-transition: width .6s ease-in-out;
-ms-transition: width .6s ease-in-out;
transition: width .6s ease-in-out;
}
http://jsfiddle.net/duopixel/hfM7E/
Try adding this to the CSS (and remove the z-index modifier in #a:hover, #b:hover {...}):
#a {
background: #55a;
left: 0;
z-index: 1;
}
#b:hover {
z-index: 2;
}
Example: http://jsfiddle.net/h6ztv/3/
Try setting initial z-index value to '0'
#a, #b {
width: 100px;
height: 100px;
position: absolute;
top: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
z-index:0;
}
#a:hover, #b:hover {
width: 600px;
z-index: 1;
}
Related
Trying to have a css3 ease transition work on border radius of an image in Safari.
It just kinda blinks into the hover state instead of smooth transition.
Any help is much appreciated. My code is below:
CSS:
.all a:hover img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
-webkit-filter: grayscale(0%);
}
.all a img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.all a img {
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.all a img {
-webkit-filter: grayscale(100%);
transition: border-radius .3s ease;
-moz-transition: -moz-border-radius .3s ease,border-radius .3s ease;
-webkit-transition: -webkit-border-radius .3s ease,border-radius .3s ease;
}
HTML:
<ul class="thumbs">
<li class="all identity">
<img src="https://imjoeybrennan.com/images/logos_t.jpg" alt="Logos"/>
</li>
</ul>
Link to the site:
https://imjoeybrennan.com
The following applied to the parent element with the border radius applied to kick webkit back into line for me:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Another option is to wrap the element in two border radius parents.
Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.
This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.
.all a:hover img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px
border-radius: 100px;
}
You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.
I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old.
I wonder if there is a clever and modern CSS3 way of doing something like this.
I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color.
Any ideas how to do this nowadays?
My approach would be this:
- I create a outer container around div.logo wich position relative. I position two divs inside of it with position absolute on top of each other. The div.hover is set to display:none and if I hover it I use css3 transition to animate it's opacity.
Is this the only way of doing this?
I'd actually love to use a pure css way where I don't have to add an additional div with the hover state to the dom itself.
Any ideas on that matter?
Thank you in advance.
use this
#home .stripes, #home .stripes:hover a {
text-indent: -9999px;
width: 116px;
height: 128px;
margin: 50px 0px 0px 56px;
float:left;
padding: 0;
background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
opacity: 0;
}
and
I actually just came up with a solution for this myself.
I wanted a way to have an image appear to work as if it was a sprite, but keep it super simple.
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
You can see it here:
http://jsfiddle.net/mattmagi/MpxBd/
I think this is what you want:
DEMO.
Basically it's using transitions like you said:
CSS markup:
.imagesTest {
position:relative;
height:200px;
width:300px;
}
.imagesTest img {
position:absolute;
-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;
}
.imagesTest img.top:hover {
opacity:0;
}
HTML markup:
<div class="imagesTest">
<img class="bottom" src="some/image" />
<img class="transition" src="some/image" />
</div>
For more information, check more examples here
Ok, so I have an empty <span> that is nested in side my <li>'s of an unordered list. The span holds a background image that is supposed to appear on :hover. The problem is that while the animation is transitioning, the z-index is wrong, the <span> stacks itself in front of the <a> element which precedes it in the DOM. As soon as the animation completes, however, the stacking order corrects itself. The result is a visual sudden "snap" of the effect and also the link becomes unclickable for the duration of the CSS3 transition.
Can anyone break down what is happening at the DOM level? How can I fix this?
You can see a working example that demonstrates the issue here: http://jsfiddle.net/qZkfw/1/
My HTML
<div id="nav">
<ul id="nav-main">
<li>Home<span></span></li>
<li>About<span></span></li>
<li>Get Fit<span></span>
<ul class="nav-secondary">
<li>Exercise Library</li>
<li>Find An Instructor</li>
<li>Fitness Tools</li>
</ul>
</li>
<li>Find An Instructor<span></span></li>
<li>Get Certified<span></span></li>
</ul>
</div>
my CSS
#nav-main li {
margin:0;
padding:5px;
position: relative;
display: block;
float: left;
margin-left: 10px;
}
#nav-main li a {
color: #97dd6e;
font-size: 1.1em;
text-decoration: none;
text-align: center;
margin-right: -7px;
line-height: 19px;
z-index: 99;
}
#nav-main li span {
height: 28px;
background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
display: block;
margin: -22px -5px 0 2px;
padding: 3px 0 0 0;
z-index: 98;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav-main li:hover span {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#nav-main li span:before, #nav-main li span:after {
content: '';
height: 28px;
width: 7px;
display: block;
background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
position: absolute;
top: 2px;
left: 0;
z-index: 999;
}
#nav-main li span:after {
background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
left: 100%;
}
Add position:relative; z-index: -1; to #nav-main li span.
Updated jsfiddle.
Edit:
I figured it out.
Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a.
Updated jsfiddle.
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
Is there a way that I can do the following?
I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.
Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:
li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}
Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.
UPDATE: I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)
The latest news on this topic:
Chrome 19 and newer supports background-image transitions:
Demo:
http://dabblet.com/gist/1991345
Additional info:
http://oli.jp/2010/css-animatable-properties/
You haven't specified any code to do the actual transition.
http://css3.bradshawenterprises.com/cfimg1/
Try this out in your hover style:
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
Take a look at this: http://jsfiddle.net/j5brM/1/
I think this suits all your needs and its a little bit less complicated.
I don’t think you can change the opacity of just background images in CSS, so unless you have two separate elements for the background image (one for each position of the sprite) and change the opacity of both of them on hover, I think you’re stuck.
li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}
should be
li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}
not sure if that fixes it or not though.
I know this may be a tad late. But I was struggling with the same issue for a long time. Also with transparent sprites many solutions don't seem to work.
What I did is this
HTML
<div class="sprite-one">
<span class="foo"></span><span class="zen"></span>
</div>
CSS
.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen {
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}
This is a pure css way & has a bit of a lot of coding.. but seems be the only way I achieved the desired effect! Hope people that also stumble onto this can find some help from this!
<li class="image transition"></li>
css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}
/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}
.image:hover{
background-image: url("some/file/path_hoverImage.png");
}
CSS:-
li {
background: url(http://oakdale.squaresystem.co.uk/images/solutions.png) no-repeat left center;
background-size: 89px;
padding: 54px 0 54px 130px;
webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
li:hover {
background-size: 50px
}