At the moment, I have a style like this:
.clip td{
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
I then add a css class and then use setTimeout to remove the class giving a simple fade animation.
Is it possible to achieve the same effect without javascript and have a complete css solution?
Use CSS3 animation and use it's delay and timing functions. You probably still end up using JS to trigger the animation if it doesn't happens right after page load.
Chris has a nice article to help you understand and write CSS3 animations:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
Related
I have 3 buttons with a class myBtn with the following property:-
.myBtn {
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
color: red;
background: white;
}
And I have 3 buttons in the view like below
<button class="myBtn " data-ng-show="view.showAdd">Add</button>
<button class="myBtn " data-ng-show="view.showEdit">Edit</button>
<button class="myBtn " data-ng-show="view.showDelete">Delete</button>
In my controller I am showing the add button for the first time and hiding the other edit and delete button. But edit and delete button are in visible for a fraction of second for the first time.
$scope.view ={
showAdd: true,
showEdit: false,
showDelete: false
}
If I am using ng-if then it is solving the problem But I have some other functionality to choose ng-show.
Question
How to resolve this issue?
Thanks in advance
After spending lot of time I came an conclusion that because of the transition all property , it is working for display none/ block.
As ng-show and ng-hide internally work using display block/none, so it showing the transition effect. And I am getting the flicker issue.
So the solution is either
Remove the transition property Or else use ng-if.
Thought to share this info....
With ng-if also the problem is not getting solved. It is working for the first time. But when you want to hide it again it is showing the flicker issue.
So I overriden the transition property for display property like below:-
transition: display 0s;
-webkit-transition: display 0s;
-moz-transition: display 0s;
-ms-transition: display 0s;
-o-transition: display 0s;
It gave me the correct result and not other functionality breakage.
Hope it will be useful for others
Thanks all
I've got a ux switch that toggles a pictures effect on and off.
http://plnkr.co/edit/JcPXpP0jE5GysBbZbrkp
I want the picture to fade from one to the other over 1 second, but I can't seem to get the fade working in CSS. Any help would be great, thanks.
.off
{
opacity: 1;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
position:relative;
z-index:2;
}
From what I can see there is no animation because you are swapping img src attribute. This swap is impossible to animate. What I suggest is that you load both images, place one behind the other and animate opacity of the one in front. Here is my plnkr: http://plnkr.co/edit/7uakbxwZETNnBiOAOfys?p=preview
Try to use the jQuery fade instead: make a .js file, link it to your .html file and try this:
$(document).ready(
$('#yourSwitch').click(
$('#yourImage').fadeOut();
);
);
And the opposite when you try to make it fade in:
$(document).ready(
$('#yourSwitch').click(
$('#yourImage').fadeOut();
);
);
I'm extremely novice when it comes to CSS. So forgive my probably very ignorant question.
I am working on adding a fade effect when hovering on links / menu items on my website. I've found a piece of code that does the trick which I've listed below. However, I am looking for a simple way to exclude this from affecting my main page content. This code is making the transition time on a slideshow choppy and slow. Is there a way to simply exclude this from affecting the main page content?
a {
-webkit-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in;
}
Thank you!
Add another CSS rule with a more specific selector that overrides it and disables the transition. For example, if the link you want to exclude has an id of "slideshow-link":
a {
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
}
a#slideshow-link {
-webkit-transition: none 0ms ease;
-o-transition: none 0ms ease;
}
Or to exclude all links within a .content div:
.content a {
-webkit-transition: none 0ms ease;
-o-transition: none 0ms ease;
}
I am seeing an interesting bug in chrome regarding CSS transitions.
The page flickers during the transitions. For now i have only seen this in Chrome.
You can see this on my porfolio: www.dkhalife.com
Just scroll down to the skills sections and hover over any of the social icons on the right repeatedly, you can't miss it...
The CSS transition code is mainly :
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
And basically i am just changing the opacity and margin using a hover pseudo class.
I have tried:
-webkit-backface-visibility: hidden;
As mentioned on some other questions on SO but it doesn't seem to fix my problem.
Any help is appreciated.
Instead of
-webkit-transition: all 500ms;
animate just the properties you want to change
-webkit-transition: opacity,margin 500ms;
I was wondering if it was possible to state an unhover class at all on an image?
What I am trying to achieve is when someone hovers over an image it will fade in and then when they unhover it fades back out?
Heres my code, I got the fade in to work when someone hovers over an image but I need it too fade out when they unhover... hope this made sense.
http://jsfiddle.net/L7XCD/
This should work for you! http://jsfiddle.net/L7XCD/1/
Let's use the great mozilla documentation to explain this:
Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.
Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)
Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier
CCS markup:
img {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
Since he was using the transition ease-in-out, I thought it was better to use the same transition function.
For more information, check the documentation here
Hope it helps!
http://jsfiddle.net/L7XCD/2/
Just add the transition effect to your element without the hover-tag