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>
Related
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.
I'm using the next CSS rules for a div
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
The thing is that currently the behavior is that the transition direction is going from right to left.
Is there anyway to make the transition go the other way around, meaning from left to right?
Thanks for any kind of help
The transition works only for elements that are selected by the query. So if you have this html:
<div>sdlfkj</div>
And this css (WRONG):
div{
width:100px;
}
div:hover{
width:200px;
transition: width 2s;
}
The transition will work only if you hover the element. Not if you unhover the element, because there is no :unhover! If you like to have the transition while unhovering the element too, you need to put the transition to the element that will be selected in the unhovered state then.
Use this (RIGHT):
div{
width:100px;
transition: width 2s;
}
div:hover{
width:200px;
}
I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/
However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).
You forgot to define the default value for left so it doesn't know how to animate.
.test {
left: 0;
transition:left 1s linear;
}
See here: http://jsfiddle.net/shomz/yFy5n/5/
Please Try this code margin-left:60px instead of left:60px
please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/
as #Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;
try this:
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
So I want this div to go from margin-left:900px to 550px in a smooth animation where it starts fast and goes slower and slower in a smooth kind of way. This should happen on page load.
I tried with javascript, but couldn't figure it out...
I know you can do something like this with CSS3, but how? Could anyone give me a code example? Tried Googling but couldn't find the answer...
Lets say I have a div with an id:
<div id='slide'>
and the CSS:
#slide {
width: 200px;
height 200px;
margin-left: 900px;
background-color: #435;
}
How do I animate this?
If you want to do it using a CSS animation on load without javascript interaction, you need to use a keyframe animation
#slide {
width: 200px;
height 200px;
margin-left: 900px;
background-color: #435;
-webkit-animation: slide 1s ease-out forwards;
animation: slide 1s ease-out forwards;
}
#keyframes slide {
100% {
margin-left:500px;
}
}
#-webkit-keyframes slide {
100% {
margin-left:500px;
}
}
Demo
forwards makes it stay in the 100% keyframe state, slide is the animation name, ease-out makes it slow down as the animation goes on (see here for a full list and here or here to generate your own), and 1s is the animation duration, in this case it is 1 second.
Other notes:
At this point in time the the animations have to be browser prefixed
in most cases
If you wished, you could include a 0% keyframe with the default
margin-left:900px, but it is not necessary in this case because it
is declared in the #slide CSS
You can use as many keyframes as you would like ranging from 0% to 100%
including decimal formats, e.g. 50.001% { ...
Another form you can write it in is using from { ... and to { ...
where from = 0% and to = 100%
Use the transition property. E.G.
transition: margin-left 1s ease-out
ease-out will give the effect you want. (Starts fast and gets slower)
Example:
http://jsfiddle.net/pM6cx/3/
Just change the marginLeft property in your onLoad function similar to the fiddle if you want to achieve this effect on window load.
Keyframes aren't needed for such a task.
To change the speed of a CSS animation, you could use the animation-timing-function :)
the trick is finding the right function.
e.g:
animation-timing-function:cubic-bezier(0,.72,.51,1);
You can use
http://cubic-bezier.com/#0,.72,.51,1
http://jsfiddle.net/SpacePineapple/54hvZ/
Here is an example for you using CSS3 keyframes:
#box{
position:relative;
top: 100px;
left:100px;
width:100px;
height:100px;
background-color: red;
-webkit-animation: move 5s ease-in-out;
}
#-webkit-keyframes move{
0% {top: 100px; left: 100px;}
100% {top: 100px; left: 500px;}
}
FIDDLE
EDIT
By adding the forwards property after ease-in-out:
-webkit-animation: move 5s ease-in-out forwards;
Updated FIDDLE
This means the animation will apply the property values for the time the animation ended
You could use css transition:
#slide:hover{transition:all 0.2s ease;width:400px;}
Knee's JSFiddle
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!