I use the following code on many divs in my site to do vertical and horizontal centering in responsive divs.
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
However then I want to animate my buttons through css3 transforms, it jumps around as it seems the animation bypasses my centerings with this "hack". Does anyone know of a similar hack to actually make just css animations doable or is this a thing I loose when I want to center things with css?
Related
We all know that background-attachment: fixed makes the background fixed and creates a parallax effect. However, this is extremely expensive, since the DOM has to repaint every time you scroll on the page. This makes your site feel a bit choppy, especially if you have several fixed backgrounds on your page. Does anyone know a better way to do this?
This pure CSS example uses absolute positioning, transform, and perspective to render the parallax effect. For some browsers, scroll-behavior: smooth may also minimize some of the visible choppiness.
There are more efficient ways to render a parallax effect by using JavaScript by animating only the visible elements and using intervals to update element positions. This article explains some of those techniques in greater detail. The requestAnimationFrame function in particular allows the browser to execute the scroll animation on the next available repaint.
I've searching for a while, but didn't find a solution.
The problem is that I need css triangle with fixed height (50px) to be stretched on 100% width of the div.
Surely, it can be done via js or jquery, or by replacing with svg, but is there any pure css solution for this?
Pure CSS triangle is manageable via borders, and borders doesn't support thickness in percents. So I guess it's impossible.
I should preface this by saying that I am brand new to the world of SVGs. I'm playing around with a rather simple experiment using SVGs and CSS3 animations.
I have created the SVG in Inkscape and saved it as a plain SVG. I've then put it into HTML to play around with some CSS3 animations.
As you can see from my link below the whole SVG bounces strangely, this can be removed by removing the .arm class from the CSS. (which stops the single red circle group that has an arm class).
The problem is that I want the red circle groups to animate (spin) whilst the entire larger group is also spinning.
Any ideas or blatant things I may be doing wrong? (I do realize it's not the best SVG but I was just experimenting).
http://codepen.io/Fernker/pen/cwvfB
Note 1: After playing around a bit more if I remove either .arm or .center CSS rules then the wobble stops, but together they produce the wobble.
Here I fixed it for you (kind of).
http://codepen.io/anon/pen/unmfE
Basically I hacked it so it works, but you'll need to wrap your SVG in another container and have that rotate from center. If you animate too far down the nest, it will be affected by siblings.
It looks as though the shape is not creating a perfect circle when spinning, therefore shifting the center whilst spinning causing the wobble.
I have a request to make these menu items:
Top menu:
Side menu:
I started with a border-radius, but I don't know how to make the other side to be 'outer radiuses', I believe both the top and bottom menu are mainly the same idea, I'll just have to play with the sizes and directions.
I'll soon share a jsFiddle of a version I'm working on, currently I haven't manage to do anything at all.
Essentially you want to use the :before and :after selectors to create a little box with a border radius in the corners you want.
There are many examples online, here are a few:
Making Outer Border Radius Using CSS and CSS3
CSS3 - Tabs with inner and outer radii - no graphics - (free for personal use - not commercial)
Flared Borders with CSS
even though it is not supported in all browsers, is it possible to use the CSS3 transition effect to move a line vertically or horizontally across the screen?
I guess you meant by CSS3. Below is an example using animation not transition.
If yes using CSS3 transform & rotate along with animation (preferably by the use of #keyframes)
Check out this fiddle: http://jsfiddle.net/gopi1410/eHZKQ/7/