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/
Related
I have an element with a -webkit-filter: blur(10px); applied to it. I'm using a CSS animation to move the element up and down with it's translateY property. When the element is animating or transitioning the blur remains but the edges become hard. When the animation or transition ends the the edges become blurred again like they're suppose to. I made a demo that shows examples of the notes that follow it.
Demo: http://jsbin.com/bofahekuko/1/edit?html,css,output
I Tried Fixing it With:
adding -webkit-font-smoothing: subpixel-antialiased; to the animating element.
forcing hardware acceleration on the animating element and adding backface-visibility: hidden on the parent
Things of Note
Happens with both CSS transitions and animations
If you move the element up and down via the CSS top property the blur filter renders correctly.
Browser Testing
Bug appears in Google Chrome (running Version 50.0.2661.86 (64-bit)) as well as in Canary.
Both Firefox and Safari (iOS and Desktop) correctly render the blur filter during the animation.
I'd really like to be able to run the animation with the translateY transition property instead of the top property. If there really isn't a fix it'd still be interesting to know what exactly is going on here to cause the problem.
Thanks in advance for any help on this.
This is a problem that's probably caused by hardware accceleration - the GPU is just moving the original blurred content without updating its background.
To fix, don't use translate or use another trick to disable hardware acceleration (like simultaneously animating margin or padding)
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?
I am using transform CSS property to rotate text but the seems to come differently in different browser, I tried it with different fonts it doesn't come smooth.
is their a way i can make it smooth. link for image
jsFiddle example
a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. that's all i got for you. makes it a bit smoother.
I know it's possible to animate the transition between background-size when using pixel or percentage values using css3, but I can't get it working to animate between contain and cover. (I'm using webkit - chrome and safari)
I have made a fiddle here: http://jsfiddle.net/59Bhb/3/ that shows it working for percentage values, but not contain/cover.
Is it just not supported?
It's just not supported - list of properties you can animate
You can animate it like such in jQuery
$('myElement').animate({'background-size':'whatever size'}, 1000);
but it's difficult to get the desired result as to it resizes linear left-top to down-right regardless of positioning. I've tried putting this in a cms template but it didn't give me the effect I was looking for. Hope I helped
CSS3 transitions, transforms and animations are wonderful. They are even more now more browsers do support them.
Still there's one thing I keep asking myself: Why isn't the spec definining that CSS3 transitions and animations should handle height:auto?
It doesn't make any sense when we're moving away from fixed layouts with things like the CSS3 flexible box model and media queries.
It doesn't make any sense to use JavaScript just to set a CSS transition with a fixed height.
Now comes my question:
Will the W3C ever specify that height:auto should be supported for CSS3 transitions and animations or can we request them to specify this?
You can transition max-height instead: http://jsfiddle.net/leaverou/zwvNY/
I'm not sure why they didn't say anything about auto values either, but you can try asking them through their public CSS mailing list. As the transition and animation specs are still working drafts, they might just toss in some changes to address this matter. Good luck!
I think I've found a solution:
http://jsfiddle.net/adambiggs/MAbD3/
My workaround is to transition max-height to the exact content height for a nice smooth animation, then use a transitionEnd callback to set max-height to 9999px so the content can resize freely.