I want to slow down animation timing in .opacity CSS property.
Like, i want it to delay 0.2ms or something like that.
To get a better idea, opacity is added when hovered a featured post on my site here: http://www.thetechnodaily.com
Remember: I have NOT USED jQuery in this. Its pure CSS.
What you seem to be looking for is CSS Transitions.
Transitions allow you to set a delay and the length of the transition.
I think this might be what you are trying to achieve?
http://fiddle.jshell.net/9VB72/2/
More info
Using jquery
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
http://api.jquery.com/animate/
Using css you can try something like this:
.class:hover {
opacity: 1;
-moz-transition: all 0.4s ease-out; /* FF4+ */
-o-transition: all 0.4s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.4s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.4s ease-out; /* IE10? */
transition: all 0.4s ease-out;
}
Related
I'm quite a noob when it comes to CSS and HTML stuff, but I have been able to tweak our Wordpress website quite well so far.... as long as nothing too technical is needed.
I have this code for images to fade on hover which I copied from another answered question:
img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
What I want is for this fade hover effect to work only on images with links. Right now it affects all my images, even those with no links.
I tried doing
a.img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
a.img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
but it did not work at all.
Any simple way to fix this?
Instead of using a.img please use a > img
So in your code
a > img{
//... your code
}
a > img:hover{
//... your code
}
The image is a child of the link, so your CSS selectors need to be a img {...} and a img:hover {...} - with a space between the two. Also a > img {...} and a > img:hover {...} is possible (which requires it to be a direct child).
I'm trying to have a menu that has a submenu and this is what I have for the moment (it's more complex than this), I want to use the transition property:
.product:hover #button-option {
visibility: visible !important;
}
#button-option {
visibility: hidden;
-webkit-transition: visibility .2s;
transition: visibility .2s;
}
Here is my jsfiddle: http://jsfiddle.net/4bsmq2kg/
I want my submenu to appear a little later, or like take some time to appear like in here: http://www.vmware.com
How could I make this work? I tried several things but none has been working. Thanks!
EDIT: I'm actually stupid and didn't realize a mistake there was in the code, but I still cannot find what I really wanted to find.
Visibility will transition, but only in binary (on/off) fashion. Perhaps you want to transition on opacity in addition (since visibility needs to be off to prevent mouse detection on the element). You probably also don't need/want the !important. Also, unless you are targeting old browser versions, you don't need the webkit-transition prefixed property (if you're going to specify it, should be -webkit-transition).
Visibility will not animate well. For that you might better animate opacity:
#button-option {
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
opacity: 1;
}
If you want the menu to slide from left to right, then you can also animate position:
#button-option {
left: -300px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
left: 0px;
}
You can check for more detail here.
At the end, I mixed opacity with visibility, thank you all! going to try some of your suggestions too, Good Night!
How can i turn all css3 animations off in just Opera browser ?
I don't want to pickup them completly , just want to turn it off in opera.
You'll be looking at targeting just the opera browser, this is done with a prefix:
-o-transition: none;
So targeting a specific element would have the following:
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: none;
transition: all 0.5s ease-in-out;
}
But your transition might be different without looking at a fiddle of your html and css.
At least, i used this code:
noindex:-o-prefocus, * {
animation : none !important;
-o-animation : none !important;
}
and problem is fixed.
It will be possible to obtain animate colour just by using css3?
Here is the demo about the effect I would like to obtain demo.
The demo is using jquery.color.js.
$(document).ready(function() {
$('.replace-bg-on-hover').hover(
function() {
$(this).animate({
backgroundColor: "#333"
}, 500);
return false;
}, function() {
$(this).animate({
backgroundColor: "#6CA2FF"
}, 500);
return false;
});
});
You can use css3 transitions for this. Here's a quick example - demo
Code from my example:
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #005ca1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.box:hover {
background: #000;
}
Edit: Added the rest of the prefixes.
Of course, you can do it. You set a :hover color for the background and you don't forget to add the transition css property to the element :
CSS code :
.myElementToHover{
background: #c00;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease
}
.myElementToHover:hover{
background: #00c;
}
Generally speaking, when you want to use a CSS3 rule, Paul Irish (jquery) made a very usefull page : http://css3please.com/ Just use it, all the answers are here ! (except that you should now add the -ms- prefix).
With this code, you add a transition for every css property, but if you want to add a transition for only the backgroundColor, you replace 'all' by 'backgroundColor'.
0.5s is the duration of the animation. It can also be set in ms.
ease is the way the animation behave. Basic settings are :
linear
ease (default)
ease-in
ease-out
ease-in-out
But you can set your own transition :
cubic-bezier(0.215, 0.610, 0.355, 1.000)
Matthew Lein made a very nice page to help you make a custom easing settings : http://matthewlein.com/ceaser/
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.