Well im working on a small php script and i have an problem with it when using trantions css3 proprety.When i use transition i dont know why it works fine when the user hover the button and it takes 1s to change background but when the user move the mouse out of the button it doesnt take 1s it changes instantaly.
DEMO
.b{
width:100%;
}
.b:hover{
background:#fff;
transition: 1s;
}
<button class="b">HOVER ME</button>
Put the transition on the base state and it will work both ways.
EDIT: some browsers will require base values to transition to/from. Also, I wouldn't set a transition without defining what I was transitioning.
Also, I tend not to transition shortcut properties. Ideally, this should be transitioning background-color only.
.b{
width:100%;
transition:background-color 1s;
}
.b:hover{
background-color:#fff;
}
JSfiddle Demo - revised
Related
I made an hover effect in my website that references an image that is the original image in 65% of opacity. The problem is, and this only happens one time, only the first time i hover it everything shakes/tremble a bit, but then everything starts working just fine. Perhaps something missing in my hover code? Can you see what's wrong?
Thanks for the help :)
The css code I'm using:
#rebface
{
content:url("http://static.tumblr.com/g1c47pc/Td2n783c4/nface.png");
position:relative;
left:8%;
margin-left:20px;
display:block;
box-sizing: border-box;
}
#rebface:hover {
content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png");
transition: 0.5s linear;
position:relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The HTML:
<div style="margin-top:20px; display:flex;">
<a target="_blank" href="http://www.facebook.com/sharer.php?u={Permalink}"><div id="rebface"></div></a>
</div>
You can see it here: (This website only works in chrome/safari for now)
http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de
You are swapping the images in the CSS content attribute. I'm quite sure these arent cached on page load so they are loaded when hovering what causes a short flickering.
You can simply avoid that by using opacity instead of another image.
.facebook
{
content:url("http://static.tumblr.com/g1c47pc/jhDn7hp40/sitef_1.png");
left:50px;
z-index:2;
position:absolute;
top:110px;
left:0px;
z-index:50;
}
.facebook:hover {
opacity: 0.6;
-webkit-backface-visibility: hidden;
}
And as a side note -- use background instead of adding a background image via the content attribute. It works for older browsers and is much more of a best practice.
In your css you have the following:
#rebtweet:hover{ some-styles }
#rebface:hover{ some-styles }
#rebtumb:hover{ some-styles }
#rebgplus:hover{ some-styles }
Each of these has one common style: transition: 0.5s linear;
Try removing this style. I'm not sure, but it may solve your flickering issue.
Hope this helps.
I've found annoying bug. I try to animate CSS properties of child elements when at the same time position of parent is changing (in the example it's from fixed to absolute). This works without problem in Webkit browsers, but in Firefox (v. 17.0.1) there's no animated transition.
jsFiddle example: http://jsfiddle.net/chodorowicz/bc2YC/5/
Is there any solution to make it work in FF?
EDIT
It's fixed in Firefox 34
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
CSS
#container {
position:fixed; left:100px; top:100px;
}
#container.some_state_position {
position:absolute;
}
.box {
width:100px; height:100px;
background:blue;
}
.some_state .box {
background:red; width:50px; height:50px;
}
img, .box {
-webkit-transition:all 1.5s ease;
-moz-transition:all 1.5s ease;
-ms-transition:all 1.5s ease;
transition:all 1.5s ease;
}
img {width:100%;}
.some_state .other_container img {
width:50%;
}
It seems you have found a good bug. Although this isn't my favorite fix, it does the job. Change your button2 to do this on click.
$("#button2").on({
click: function() {
$("#container").toggleClass("some_state");
setTimeout(function() {
$("#container").toggleClass("some_state_position");
}, 50);
}
});
It appears for firefox the toggleClass() fires immediately for both classes, causing some issues with the transition effects. Putting the timeout gives jQuery the enough time for it to process what it needs to, in order to do the transitions similar to those in Chrome, etc. I put the timeout to 50ms, this appears to give it enough time for jQuery to process what it needs to do. Going lower than that I saw sometimes, it fail and do what you are currently experiencing.
i got a little question when using the transition-effect with the property display:
I am testing on Safari:
input.input_field {
display:none;
transition-property: display;
transition-duration: 2s;
-webkit-transition-property: display; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
}
input.input_field_active {
display:block;
}
But this example doesnt work for now, anybody knows why i cant use the the property : display??
Greetings!
You can only perform a transition on a scalable property, i.e. a numerically defined property (which may or may not have units of measurement) which exists within a range for which any two points are related. The reason for this is that in order to perform a transition the browser takes the starting point and ending point provided then extrapolates the interim keyframes- producing the resulting animation.
The display property is not scalable, it is simply 'on' or 'off', indeed more specifically it has a number of properties which arent related on any form of scale. As such, the interim values cannot be extrapolated. You can also look at it like this, display is also a layout and not visual style- although it does have visual connotations. You can only perform transitions on visual styles.
Depending on what your requirements are, you can perform a transition on opacity or height (or width).
Demo Fiddle of alternate transitions
You can use a combination of visibility in place of display and the use opacity as a fade effect.
visibility is transtionable although it also only has an on / off state BUT you can use a transition delay to affect it.
JSFiddle Demo
HTML
<button>Hover</button>
<div class="wrap">
</div>
CSS
.wrap {
width:100px;
height:100px;
border:1px solid grey;
background-color: #bada55;
margin-top: 25px;
visibility:hidden;
opacity:0;
transition: visibility 0s linear 0.5s,
opacity 0.35s linear;
}
button:hover + .wrap {
visibility:visible; /* show it on hover */
opacity:1;
transition-delay:0;
}
This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 9 years ago.
I have an image with a button on it. The button will only be visible, if I hover over the image.
I change it from display:none to display:block and it appears instantly.
I would like to delay the appearance of this button by 1 sec or make it appear linear, so it's a smooth transition. I saw the CSS3 transition property and applied this, by using opacity, too (0.0 to 1.0).
It seems not to be working. What am I missing? I don't think the -webkit specific properties are the reason.
Check out my fiddle.js example:
Fiddle.js: Image hover over overlay transition example
Thank you!
Here is a working fiddle
I have use all instead of opacity, but either way you can change that too.
.image_controls{
position: absolute;
left: 0;
top:5px;
opacity:0.0;
}
.image_wrapper:hover .image_controls {
-webkit-transition: all 2s ease;
transition: all 2s ease;
display: block;
opacity:.9;
}
You could use jQuery's fadeIn() / fadeOut(). As you tagged javascript and jquery, I guess using JS would not be a concern for you, right?
I need to change the background-color from red to transparent.
This change should occur when I hover over a div.
The reason is why I need it transparent is so I can show an absolute positioned div under the main div, in other words, when I hover over the parent div, I need to show the child div.
When I move away the cursor from this div, I don't want a reverse-transition, I want the background to stay transparent, I want the blue div to always be there after I move away the cursor.
Since I need a PURE CSS solution (No JS/JQuery), I came into the CSS3 Transition.
<div id="parent">
<div id="child">
</div>
</div>
This is a fiddle (Firefox).
#parent
{
background:red;
-moz-transition:background 1s;
}
#parent:hover
{
background:transparent;
}
I thought about doing this with animation, since I can fake this by giving it a temporary duration to stay transparent, for example.
0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}
But then animation will stop when I move the cursor away.
Note: This may sound ridiculous or stupid, but my intention is bigger than this, this is just one small example.
Take a look at the transition-delay property.
#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }
Fiddle
This way, the hover animation will happen instantly (0s) while the transition to the initial state will only happen after 277 hours without leaving the page. You can increase the value a bit further if necessary, though I believe this value is enough for a real world page. =]
I don't think it's possible with pure CSS. As a compromise you can use JavaScript to add a class to the element and then handle all visuals with CSS.
http://jsfiddle.net/ZvcgP/1/
HTML
<div class="effect">Hover me</div>
CSS
.effect {
background-color: red;
-webkit-transition:background 1s;
transition:background 1s;
}
.effect.anim-done {
background-color: transparent;
}
JS
$('.effect').mouseenter(function () {
$(this).addClass('anim-done');
});
use below code to transiton from red to transparent. and please change 'object' to the class of your object
.object {
background-color: red;
-webkit-transition:background-color 1s linear; /* for webkit supported browsers */
-moz-transition:background-color 1s linear; /* for old mozilla browsers */
-o-transition:background-color 1s linear; /* for opera browsers */
transition:background-color 1s linear; /* for css3 supported browsers */
}
.object:hover {
background-color: transparent;
}