I have a web page that contains five divs. A user can switch between the divs by clicking a next or previous button. If next is clicked, I fade-in the next div on top of the existing one and fade-out the existing div. Imagine something like flipping through some pictures.
My problem is, I am only animating the opacity property. Because of this, the users cannot interact with some of the elements of the visible div. My hunch is that its because there is an invisible div on top of it.
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
#keyframes fadeOut { from { opacity:1; } to { opacity:0; }}
.fade-in {
opacity: 0;
position: relative;
top: 0;
left:1rem;
animation: fadeIn 0.3s ease-in;
animation-fill-mode: forwards;
}
.fade-out {
opacity: 1;
position: relative;
top:0px;
left:1rem;
animation: fadeOut 0.3s ease-in;
animation-fill-mode: forwards;
}
Is there a way using CSS, that I could change the display property from inline to none when the fade-out animation has completed? I know I could wire up some jQuery. However, that seems kind of clumsy. It seems like there should be a way for me to change an element from visible to hidden after the 0.3s have elapsed.
Any help is appreciated.
Yes, opacity will keep the invisible overlaying elements on-top.
Animate opacity, but at the same time toggle visibility from/to hidden/visible allowing interaction with underlying elements once an element is visibility:hidden
Also, instead of relative since you want a fade-trough effect, absolute should best fit your requirements.
Related
So in this simple example lets say you have an element that on hover has an animation that moves it to the right. Then when the mouse moves instead of jumping straight back to the original position it transitions back to that state.
#test{
position:absolute;
left:0;
transition:left 3s linear;
}
#test:hover{
animation:move 4s linear;
}
#keyframes move{
0%{
left:0;
}
100%{
left:300px;
}
}
<div id="test">Hover</div>
The result doesn't work in any either Edge or Chrome. Firefox works but only on the first animation. Any subsequent animations won't work until you refresh the page. So is this possible? And why does Firefox work once then stop?
So I am clearer this is an simple example. Sure this can be done with just transitions, but transitions are limited and not always possible. Also if you will notice a return animation isn't possible since it could be from an arbitrary point.
Rather than using the animation and transition properties, you can accomplish this using just the transition property.
#test{
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover{
left: 300px;
transition: left 4s linear;
}
The issue you're having is that the animation must complete in order to transition into a different state. Furthermore, when you mouse out another animation needs to be added to the non-hover selector which animates from 300px back to 0px. To fix this, just use the transition property within the hover and non-hover selectors. However, this is really only a 2 state solution. If you want more granular control of the animation then you'll probably want to create two separate animations one for forward and one backwards.
Just use the transition on the non-hover selector. No need for animation here.
#test {
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover {
left: 300px;
}
<div id="test">Hover</div>
I'm learning CSS and playing with TranslateY
I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below
.slideIn{
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.
However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like
.growMore{
animation: grow-more 0.5s forwards;
}
#keyframes grow-more {
0% { height:100%; }
100% { height: 150%; }
}
I did try adding another TranslateY but it also gave no result, hence why I tried with height
Is this possible?
I have read a couple of tutorials online, but I can't seem to get a cross-browser working example together.
HTML:
<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>
CSS:
/* ANIMATIONS */
.drop-down {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-ms-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
line-height: 100%;
}
.drop-down.ng-enter,
.drop-down.ng-leave-active {
opacity: 0;
max-height: 0px;
}
.drop-down.ng-enter-active,
.drop-down.ng-leave {
opacity: 1;
max-height: 100%;
}
What I would like to accomplish is that when the template is loaded with ng-include, it fades in from 0 to 100 opacity, and that it simultaneously opens like a dropdown (starting from 0, to full height that it needs). And vice versa when the form gets hidden.
The opacity already works, but changing the height does not, the div instantly appears with full height. Can some help me build the CSS with a cross-browser solution?
you have to define max-height in px in .drop-down class to make it work.
you can put any high value to max-height in px as you are anyways not defining the height.
also define overflow: hidden in .drop-down so that content is hidden on transition of height.
worked for me.
example demo here :- http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;
I'm trying to make a cube appear at the top of the page with css animation and keyframes.
but he appears at the beginning and only after does the animation.
how do i make it appear just from above?
I wanted that loads up the page and past two seconds the cube appeared.
<div id="cube"></div>
cube{
position: relative;
left:60px;
width:100px;
height:200px;
background:red;
-webkit-animation-name: cube;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 0.8s;
}
#-webkit-keyframes cube {
0% {top: -200px;}
100% {top: 0;}
}
here is my example
http://jsfiddle.net/hmmatos/epZJB/
Sorry if I've misunderstood your question, but I'm not really sure how you mean so I've done two different examples hoping that at least one of them will help you.
Demo One
What I've done here is I've added -webkit-animation-fill-mode: forwards; which will maintaine the last state of the animation, making the div stay visible at the position you have set.
Demo Two
In this demo, I'm animating the opacity instead of the positions.
So insted of sliding the div from top: -80; to top: 0; the div fill just fade into place. Also this example uses the -webkit-animation-fill-mode: forwards;.
Here's a good resource if you want to read about CSS animations.
http://www.w3.org/TR/css3-animations/
Hope this helps!