I have been playing around with transitions and animations, and I wanted to make the most of using hover with them.
I was wondering if it is possible to make animation happen after being hovered over, not necessarily while hovering over it. For example, if I wanted a picture to slide in and change opacity after the related paragraph is hovered, how would I get it to stay without keeping the mouse of the section?
My last question is if something similar to keyframes can be used with transitions. I prefer transitions because they transition back to the original state instead of snapping back.
I made a jsfiddle with some basic code examples, and I am wondering how to expand upon them. Hopefully the examples help clarify what I am trying to explain.
jsfiddle
Says I need code to link jsfiddle
They are very simple, the first is just an animation (left to right) that I want to remain after hovering once.
The second is a transition (left to right), and I am wondering if I can make an animation similar to the animation that follows it (left to right to left)
I update the fiddle here
However, "left to right to left" can not accomplish through transition.
Because transition only has start status and end status, it can not handle the middle status.
Look here. https://developer.mozilla.org/en-US/docs/Web/CSS/transition
You can accomplish "left to right to left" through keyframes. For example.
#keyframes slideRight {
0% {
margin-left: 0em;
}
50% {
margin-left: 2em;
}
100% {
margin-left: 0em
}
}
Related
I am trying to animate a list of html elements with following CSS property:
animation: slide-right 10s linear infinite 0s;
Animation is perfect for me but, when list finish I would like to have a loop behaviour instead of a jerky transition that restart the animation because of infinite property of animation.
I tried to workaround it appending items via jQuery but it doesn't work. It's possible to do a loop animation with css3?
I got inspiration from this codepen: https://codepen.io/goomy/pen/vXKGGz
Thanks in advance
UPDATE: My code here
By "loop" I am going to assume you mean you want the element to re-appear from the bottom of the screen once it has vanished off the top of the screen.
One way to achieve this could be to set overflow-y: hidden on your body element, and then define the animation keyframes in terms of viewport height units, vh. If you translate an element to appear at y = 110vh then (assuming the document doesn't overflow) you know that it must appear off-screen since the very bottom of the body element is at 100vh. Similarly, you can transition to something like -10vh at the top, assuming the element is less than 10vh tall.
I modified your CodePen to illustrate this idea:
https://codepen.io/anon/pen/pwBxPL
I'm trying to do some nice transition either dynamically through d3 or using CSS for rects but I am having little lucky finding a good example of how to do so.
The idea is that I want to grow my bar chart from bottom to top when its being rendered.
The chart is rendered using Vega, which I don't believe has built in transitions yet, so I need other options to do outside of the library.
I attempted to use CSS animate, but it has some weird rendering issues and also goes top to bottom rather then bottom to top
rect {
animation: bar-fill 2s linear;
}
#keyframes bar-fill {
0% { height: 0; }
}
https://jsfiddle.net/zg2hnr2x/3/
Your CSS approach will currently only work in Chrome. height is not officially an attribute that can be animated with CSS (yet).
The reason that it grows from top to bottom is because the coordinate origin of SVGs is at the top-left, and so the x,y coordinate of a <rect> is also at the top left. The bottom right of a rect is at x+width,y+height.
If you need a cross-browser way to animate SVG elements then may want to look into one of the many JS SVG Animation libraries that are available.
I am working on this 3 panel card opening animation.. Here is an example of what I have so far.. example. This is the class that I'm applying for the second animation and transform-origin just doesn't seem to do what I think it should.. But I'm pretty new at this animation stuff.
.two-right {
transform: rotateY(170deg);
transform-origin: 100% 0;
}
As you can see the problem is that I cant get the second animation to open correctly.. On the left side it works just fine but on the right the card isn't opening correctly on the right side of the card.. Right now I'm just poking around and haven't been able to find anything. Any help would be appreciated.
Okay I found the answer to my own question.. The reason is that the flip is based on it's parent.. That's why it is rotating on the wrong axis but after it's scaled and the animation is complete it ends up being positions in the correct location.
Instead of trying to do the animations I put a timeout in the javascript to let it scale and then add the flip animation later. Here is the completed code.
Complete example
.two-right {
/* transform: rotateY(170deg); */
transform-origin: 100% 0;
}
.two-flip {
transform: rotateY(160deg);
}
I first add the .two-right class and then the .two-flip half a second later.
Fiddle
Basically, instead of just the basic rotateY(180deg) method, I'm trying to combine it with a translateX transform so that the card looks like it's actually being picked up from the right side (left when flipping back) and then being laid back down on the "table" in its new orientation.
As you can see in the Fiddle, it has the right general motion, but for some reason the two faces are not in sync. I'm not sure what I'm doing wrong - I guess I'm just not spacial-geometrically incined XD
Any help sorting this animation out would be much appreciated!
I think that this is what you want:
updated fiddle
The trick is that the background needs another transform origin:
#tcb {
background:#030;
transform:translateX(-100%) rotateY(180deg);
-webkit-transform:translateX(-100%) rotateY(180deg);
z-index:0;
transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
}
The reason is that the angle of rotation is reversed, so that you need to flip it around the other border. (So, the origin at 100%). And now that you have changed, that, you need to readjust the offset (the translateX value)
I needed also to move the transform-origin for the foreground from the div (where it was set both for foreground and background) to the foreground div.
Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.