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.
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 have to make an animation with css. A logo flying and enlarging into the front based on a curved path or parabola. I made a small sketch.
The logo is staring small top right, flying and getting larger and is ending left center.
Sketch
I found a lot of informations about cubic-bezier also cubic-bezier editors, but unfortnatelly I am not able to realize this.
The html
<div class="animation"><img src="logo.jpg"></div>
The css
.animation {
transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465);
transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465);
}
This was one (of several) trys but the logo isn't animated. Besides, if I understand it, that is only the path without scaling.
Where is my thinking error?
Thanks a lot & regards!
First, cubic-bezier is a timing function, not a "path" function. It's not going to accomplish what you are after.
Second, to accomplish what you desire, use the CSS3 matrix transition property in conjunction with a custom animation function with a custom step callback. Either that, or adjust CSS properties like top, left, height, and width directly with said animation function.
Good luck!
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
}
}
I'm attempting a CSS3 animation effect using a 3D transformation/transition. I have an HTML container, which is effectively divided up into "tiles" with another layer that sits on top. What I'd like to do is create a "flip" effect on individual tiles.
Like this, except where one of the layers is plain HTML (eg, text).
.sub {
-webkit-transition: -webkit-transform 0.6s linear;
}
.flip {
-webkit-transform: rotate3d(1,0,0,90deg);
}
After pondering this for a while, I'm not sure it's even possible. Here's what I attempted.
Container with some text as the back layer.
Layer tiles on top; set one tile's opacity to zero, creating a "window".
Now apply the transformation to the back layer.
Add a third layer on top, that is the same as the first layer.
This almost works, but not really; the "window" flips as it should, but of course the top layer is still visible over the window, ruining the effect.
Is there any way to accomplish this partial-flip effect?
I'm not sure but I think that this -> http://ryanlowdermilk.com/2012/03/windows-8-metro-tiles-with-html-css3-and-javascript/ is what you need...
I've used the div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html
My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.
It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??
I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.
With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.
Even easier, use jquery .hover()
reposition your links after adding this to your css:
a div {
line-height: 0;
}
I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.
Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.
No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.
Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:
div#keyboard2 {
position: absolute;
left: 89px;
top: 256px;
width: 67px;
height: 160px;
background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }
Your desk image will then be empty, and of your items will just be on top of it.