In this example, I want to display the element just in a step of the animation. However, it is not possible, because if I set display:none in the main CSS rule, the animation will not override it.
#test {
-webkit-animation: test 2s;
display:none; // here is the problem, as the animation does not override it.
}
#-webkit-keyframes test {
0%{margin:5px}
20%{display:block}
70%{margin:40px}
}
Note that this is a simplified example, and in practice, I need to use display:none to hide the element before it becomes visible by the animation. Thus, other tricks like opacity does not satisfy my need.
I'm not sure what you're trying to do, if you want to hide the element and just show it when the animation starts, make use of visibility property like this:
#test {
-webkit-animation: test 2s;
visibility:hidden;
}
#-webkit-keyframes test {
0%{margin:5px}
20%{visibility:visible}
70%{margin:40px}
}
fiddle example
Related
I have a component which is wrapped in an if like so:
(if #(subscribe [:some-condition])
[:div.show-me "Show me"]
)
And I want to apply an animation to the show-me div as soon as it is displayed, i.e., when the condition is true.
Now, I know how to apply transitions in css using selectors like :hover, and :active, for example:
.show-me {
transition: all 1s ease-in-out;
}
.show-me:hover {
transform: scale (1.1em);
}
Will scale the div when hovered over.
But how to scale, for example, a div as soon as it is shown?
I'm learning CSS3. Now, what I've seen in w3schools website is that:
CSS
#ID {
transition: transform 3s;
}
#ID:hover {
transform: rotateX(20deg);
}
And what I did is this:
CSS:
#ID:hover {
transform: rotateX(20deg);
transition: transform 3s;
}
Both are working. So, the question is: Can I put both transition and any transformation property in same selector? Or is it not the right way?
SHORT ANSWER:
If you define your transition property in element:hover, it will only get applied in that state.
EXPLANATION:
Whichever CSS properties you define in element:hover will only be applied when the element is in the hover state, whereas whichever CSS properties you define in your element will be applied in both states.
Transition property declared in normal state:
See how the transition always runs when the element's state is changed. When you stop hovering the element it will still make the transition back to its normal state.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
transition: transform 1s;
}
#ID:hover {
transform: rotateX(60deg);
}
<div id="ID"></div>
Transition property declared in hovered state:
See how the transition breaks when you stop hovering the element and it jumps to its normal state immediately.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
}
#ID:hover {
transition: transform 1s;
transform: rotateX(60deg);
}
<div id="ID"></div>
The first example is generally correct, as the transition timing is stated on the unaffected state. But that's based on the majority of examples I've seen of how to generate transitions on hover actions.
1st case :
All your transition in the #ID will have a transition of 3s.
When you hover your #ID, your transformation is rotateX(20deg).
2nd case :
When you hover your #ID, you have a transition of 3s.
Overall :
All the transitions from the first css will have a duration of 3s. Then you can apply transitions on your #ID from different places. Whereas in your second case you separate them and if you want to have another transitions triggerd by something else than hover, you will have to specify the duration again.
Both are correct
When a transition is specified for the :hover state, the transition won’t work on mouse out.
The CSS transition property lets you animate on both hover-in & hover-out if you put the transition as below:
#inner{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner{
opacity:1;
}
However, if the transition is moved to :hover state, it only happens on hover-in.
#inner{
opacity:0;
}
#outer:hover #inner{
opacity:1;
transition:opacity 2000ms;
}
Is it possible to do the reverse, i.e. animate on hover-out only?
Here's one way to achieve this (put a bogus property none for transition property in :hover):
#inner2{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner2{
opacity:1;
transition:none;
}
http://jsfiddle.net/j716sbav/4/
Answer updated to incorporate #BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant.
If you prefer not to specify the transition property more than once, you can apply the transition to :not(:hover), but the caveat is that you need to swap all of the other declarations as well:
#inner2{
opacity:1;
}
#outer:not(:hover) #inner2{
opacity:0;
transition:opacity 2000ms;
}
Either of these will work, but if you don't want to deal with confusing inversions, stick with overriding via transition: none.
Also note that CSS selectors represent states and not events, which means that it utilizes a :hover state rather than mouseover and mouseout events; however, a transition from :hover to :not(:hover) is essentially the CSS way of expressing a mouseout animation.
I know this is a very old post but, as it came up in response to my Google search on the subject, I thought I'd post my solution.
After reading everything posted here, I found the simplest solution. Place a transition on the initial state as follows:
.btn {
opacity:0;
transition:0.6s;
}
.btn:hover {
opacity:1;
transition:0.8s;
}
So it has a transition time to the hover state and a transition time to the non-hover (ie normal) state. Saves a whole bunch of code.
I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO
I want to fade an element from visible to invisible.
I know I can do this using:
element {
opacity:1;
}
element.fade {
opacity:0;
transition: opacity .5s linear;
}
The problem with this is that the (now) invisible element is still present, taking up space.
I'd like it to fade and then disappear completely, like if display:none was set.
You can hook the transitionEnd event and then when the fade finishes you can set display: none in that event handler. Or, you can use a different type of transition that ends with the element taking no space (such as transitioning the height to 0).
To hook the end of the transition, you'd use something like this:
// for webkit browsers
node.addEventListener('webkitTransitionEnd', function() {
// set to display: none here
}, false);
Use other prefixes with the transitionEnd event for other browsers.
Set a javascript timeout at 0.5s and then just add the extra css
var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {
element.style.display="none";
}, 500);