Can anyone let me know why my element will not fade in?
The background image properly animates, but the .home class just appears rather than fading in?
Thanks, code snippet is below.
#home {
width:35px;
height:35px;
float:left;
margin:20px 20px 0 20px;
transition:background-position .2s ease;
-webkit-transition: background-position .2s ease;
-moz-transition: background-position .2s ease;
background-image:url('images/icons.png');
}
#home > .home {
position:absolute;
display:none;
margin-top:40px;
opacity:0;
transition:opacity 3s linear;
}
#home:hover > .home {
display:block;
opacity:1;
}
#home:hover {
background-position:0px 35px;
}
<!-- END STYLE START HTML -->
<div id="home"><div class="home">HOME</div></div>
Add transition on hover as well.
#home:hover > .home {
display:block;
opacity:1;
transition:opacity 3s linear;
}
For cross-browsing transition add:
-moz-transition ...
-webkit-transition ...
-o-transition ...
-ms- is not supported.
From W3Schools: "The transition property is not supported in any browsers.". Instead, use the specific transition properties for Firefox, Chrome, Safari and Opera: http://www.w3schools.com/cssref/css3_pr_transition.asp
IE does not support this at all.
If you want real working transitions, you should consider using a javascript library that supports animations like JQuery.
Related
Building a WordPress theme and trying to crossfade multiple background images on the body tag and not on a div!
I have been trying to use the tutorial here: http://css3.bradshawenterprises.com/cfimg/ | Demo 3
with no success
Is it possibe to do without javascript and jquery and just use css only! Currently my Body css looks like this....
body {
font-family: 'Arial', courier, sans-serif;
background:url('ASSETS/bg2.jpg')no-repeat top left;
background-size:cover;
background-attachment:fixed
}
I do have another image to crossfade in my ASSETS folder called bg.jpg.
you could use a keyframe animation for this. Something like:
body{
height:100%;
background:red;
-webkit-animation: 9s fadeThis infinite;
animation: 9s fadeThis infinite;
}
#-webkit-keyframes fadeThis{
0%{background:url(http://lorempixel.com/1000/900/);}
50%{background:url(http://lorempixel.com/900/900/);}
100%{background:url(http://lorempixel.com/1000/900/);}
}
#keyframes fadeThis{
0%{background:url(http://lorempixel.com/1000/900/);}
50%{background:url(http://lorempixel.com/900/900/);}
100%{background:url(http://lorempixel.com/1000/900/);}
}
should crossfade for you.
See caniuse for more information on prefixing requirements.
Here is what I ended up doing! That tutorial that I referenced above originally still did not work so I tweaked it slightly...
The CSS
body {
font-family: 'Arial', courier, sans-serif;
background:url('ASSETS/bg.jpg')no-repeat top left;
background-size:cover;
background-attachment:fixed;
}
and then...
#cf {
position:absolute;
height:100%;
width:100%;
}
#cf img {
position:fixed;
background-size:cover;
background-attachment:fixed;
top:0; left:0;
-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
}
#keyframes cfFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf > .top {
animation-name:cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
The HTML
<div id="cf">
<img class="top" src="<?php echo get_template_directory_uri(); ?>/ASSETS/bg2.jpg">
</div>
for those developing a WordPress theme like myself I added the opening CF div right after the body tag in my header file and of course closing that right before the ending Body Tag in the footer!
I then used z-index on the header, menu and content elements so tht the crossfade div is always the background! Also the css may need tweaking for mobile and tablet devices.
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
I'm learning about animations/transitions with CSS3, but in this code the transition don't worked... why?
HTML:
<div id="test">
</div>
CSS:
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
http://jsfiddle.net/LLRfN/
This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:
Here is a generator
Here is an explanation
edit
Sorry I didn't realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.
Here is a good article on how to get it to work with a little bit of a hack
http://nimbupani.com/some-css-transition-hacks.html
its working fine on me. have you wrapped the css file with tag?
<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}
#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>
It worked for me, Also I can point you to the CSS3 playground where you can check it on the fly CSS3 Playground
Gradient transition can by done with little bit of "cheating". I am definitely not pro in css stuff (and I am new here so don't hate me fast :D ), but just place to divs on top of each other, one with opacity 1 and second with 0.
(Each div has set different gradients) On hover, change opacity from 1 to 0 and vice versa.
Set timing function and however these divs are placed on each other z-index property do the rest.
(Optimized for Safari) Maybe rookie way, but this works (surprisingly) perfectly:
#divgradient1
{
z-index:-1;
height:100px;
background: -webkit-linear-gradient(90deg, red, blue);
background: -o-linear-gradient(90deg, red, blue);
background: -moz-linear-gradient(90deg, red, blue);
background: linear-gradient(90deg, red, blue);
opacity:1;
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index ;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient1:hover{
z-index:-1;
opacity:0;
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient2:hover{
opacity:1;
z-index:2;
background: -webkit-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
#divgradient2
{
z-index:1;
opacity:0;
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue);
background: linear-gradient(-90deg, red, blue);
transition:background,opacity,z-index;
-webkit-transition:background,opacity,z-index;
transition-duration: 1s;
-webkit-transition-duration: 1s;
}
and whatever-it-should-look-like divs:
<div id="divgradient1" style="position:absolute;width:100px;"></div>
<div id="divgradient2" style="position:absolute;width:100px;"></div>
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
}