I have a main nav that is a CSS3 only drop down menu with and nice animation as the subnav appears.
I also have on the same page a slider (flexslider) which is also a CSS3 only item.
My problem is that that animations are interfering with each other. Once I hover over a navigation item, the subnav menu for that item only shows up once the slider is set to slide to the next image, so both animations happen at the same time instead of independent of each other.
Here's a link to the page I'm talking about: http://supermarchepa.com/v3/eng/index.html
Cheers.
It seems Safari doesn't like animating visibility, try animating only the properties you need.
nav ul#nav ul {
-webkit-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
-o-transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;
}
This will fix your problem. Though it is a very weird bug indeed.
Related
I have a png image which works as a link and I would like to give it an effect on hover. For example its background colour changes to orange. Can I do it by CSS?
Or any other effect, such as an orange shadow around the shape inside the png image, and not the whole image (including transparent areas).
This is the code so far:
.latestTrack img {
float:right;
margin-right:50px !important;
}
.latestTrack img:hover {
box-shadow: 0 0 10px orange;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
You can set a shadow around a shape of a png alpha image with a drop shadow filter.
-webkit-filter: drop-shadow(10px 10px 10px gray);
See this link for + info
drop shadow filter comparison
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
I have a css animation on an image and I want it to play when the page loads. What is currently happening is that the image get loaded without the animation playing the first couple of times you load the page. After that is works fine. I'm guessing the image gets cached.
Is there a way to pre load the image so that the animation works straight away?
Rather than preload the image, I'd recommend not applying the animation until the image has loaded. Using jQuery, you can apply a class to the image only once everything has loaded:
$(window).bind("load", function(){
$("#future-head-hand").addClass("loaded");
});
Then apply the animation to that class instead:
.loaded {
position: absolute;
left: 60%;
bottom: -40%;
margin-left: -190px;
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-webkit-animation-name: movinghand;
-webkit-animation-duration: 0.5;
}
I think you can accomplish the same thing by moving all your js to the bottom of your html so that it loads after all of the css and images.
If you're using Adobe Edge, you can go into View > Preloader Stage and add a spinner, or something like that, to show that the animation's loading, before it's actually ready.
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
}