I'd like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay, but not perfectly natural.
I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.
What's the best way to implement elastic easing in pure CSS3?
Here's my work so far, if that helps anybody...
https://jsfiddle.net/407rhhnL/1/
I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:
#include keyframes(popup) {
0% {
}
20% {
transform: translateY(-50px);
}
40% {
transform: translateY(20px);
}
60% {
transform: translateY(-6px);
}
90% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.
Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier() keyword instead.
An example animation would look like this:
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;
Lea Verou's blog post covers this pretty well.
Lots of great cubic-bezier transitions available here:
http://easings.net/
Something like this might be what you want:
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
The only way to do an elastic easing in pure CSS is by hard-coding a keyframes animation, like you did.
The main problem with this approach is that the animation may look rough. To make it smoother, you just have to add more key frames. But then, the payload increases a little bit.
If you compare this approach with using a JavaScript library, a library lets make smoother and preciser animations, but the payload is way heavier because you have to use an entire library.
So, for some short transitions, it's fine to use hard-coded key frames animations.
It can be tricky to make the key frames, so I suggest using a tool for that. This is the only I know of:
https://easyeasings.com/
Edit: There's a CSS proposal to create this kind of easings: https://github.com/w3c/csswg-drafts/pull/6533
Related
I faced the issue with low fps while using backdrop-filter and transition on the same component.
.modal-background {
// some styles
backdrop-filter: blur(2px)
transition: all .15s linear
}
As simple as that. The animation is glitchy :( But if I comment out backdrop-filter line, things are getting better.
You can achieve a different but comparable effect by instead animating the backdrop-filter's opacity() like so:
.bg {
transition: backdrop-filter 0.2s;
backdrop-filter: blur(4px) opacity(0);
}
.bg.show {
backdrop-filter: blur(4px) opacity(1);
}
I have seen some minor graphical glitches when doing this in Chromium. But on the plus side, I've also found this approach to be much more performant than the alternative suggestion of animating a (non-backdrop) filter property's blur(). There's a trade-off to be made between responsiveness and graphical accuracy.
I believe, it's a very new property and can't be animated properly yet. You can always restructure something to make work this one instead: filter: blur(7px);
As Roman mentions
its a very new property. Until it got optimized, you have to look for alternatives. More specifically on "filter: blur(6px)":
<div id="root"/>
<div id="modal"/>
If you are trying to apply a backdrop on modal, don't. Go put some listeners on parent (#root) element checks if it has that child modal, apply filter on "#root" and enjoy.
Related to this question: Android Holo loading spinner in CSS I have noticed that the accepted answer's first example, the one with images, doesn't work on chrome (i just see a static grey ring) while it works on Firefox and IE 11.
Even though the purpose of the question was to make a spinner without images and both are very nice I find the first one slightly better looking (on firefox, that is) and i'd like to use it but I don't know why it doesn't work on chrome and I want to know if there's a fix, both for future references (so i know what to avoid and/or how to fix it) and to know if I must stick to the one without images
My Chrome version is 42.0.2311.90 (32-bit)
Since i assumed both spinners were correct i didn't realize it was missing the webkit-keyframes property. Today i watched once again the css and noticed by chance that the css spinner had it while the image-based spinner didn't. Adding this to the image based spinner css worked
#-webkit-keyframes rotate-outer {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(1080deg);
}
}
#-webkit-keyframes rotate-inner {
0% {
-webkit-transform: rotate(720deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
I am trying to get the "tilt-in" animation working on a little project of mine using CSS animations. Unfortunately I have not been able to port it from the MS Demo where - doubtlessly all the code is there: http://m.microsoft.com/windowsphone/en-us/demo/default.aspx#home
I'm trying to get the tiles to fade in when the page is loaded, just that part. Once is absolutely fine. I understand that I need to define the vendor keyframes, but my attempts have been so poor that I am not pasting them in my example in jsFiddle:
http://jsfiddle.net/qCQQD/2/
Anyone out there who'll help me out? That would be beyond awesome!
EDIT 1:
a) I'm still trying to get the rotateRight animation running when the page is loaded. I've probably got a hacky version with leftRotate in the .tile class and that removed (and rightRotate added) on pageload.
b) This
.tile:active {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
-o-transform: scale(0.97);
-ms-transform: scale(0.97);
transform: scale(0.97);
}
got super slow in Chrome because of the code added, how can I get it back to normal?
I suspect it takes some sort of timeframe from the #tile
-webkit-transition: 300ms 160ms;
It looks like a slow motion right now. I'm going to try adding something like -webkit-transition: 50ms to it. (yeah I know, total noob).
Basically like this. You have it set up fairly correctly, but you just need to actually change some settings. Check this jsfiddle DEMO out.
I'm only using javascript to add a class or remove a class. You could simply do that sort of stuff on a :hover tag in css also it would do the same thing.
I mainly just modified your css to include a rotate(90deg) -webkit-transition. Therefore this will only work in chrome and probably safari. If you want it to work in firefox then you'll have to do the -moz-transition for the rotation.
Is there a way for Adobe Edge to output with only CSS3 so javascript doesnt have to be used? If not, is there something else I can use that can do this?
You can do simple animations with CSS3 only. MDN is a useful resource.
This is the basic syntax:
h1 {
-webkit-animation-duration: 5s;
-webkit-animation-name: colorchange;
}
#-webkit-keyframes colorchange {
0% {
color: #fff
}
100% {
color: #000
}
There are other editors out there. Edge is really not the ideal editor for a lot of applications. For one thing, it is pretty heavily reliant on Javascript. Entirely I believe. Edge, for me, seems more geared to non-flash animation with a more powerful api to control animations from the page.
Other editors to look at:
Sencha animator
Hype
Purple for Mac
Purple, in particular seems like a good one for css3. It has a good, simple interface that can import psd files. But it is mac only.
Is there a way to create a fade-in/fade-out effect on mouse over/out respectively that only uses CSS 3?
If there is, would you say that it is a good way to implement such an effect with CSS only or not?
To me, it seems like a presentation only issue so I'm not sure why JavaScript should be involved?
Are you looking for something like this: http://jsfiddle.net/hRuR9/2/ ?
It's pretty simple...
.box{
opacity: 0.0;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
}
.box:hover{
opacity: 1.0;
}
As for whether using it or not is a good idea, it depends on your target audience and which browsers you expect them to use or want to support. Recent versions of Safari, Chrome, and Firefox (and I believe Opera) support it. No idea about recent versions of IE, but you can pretty much forget about the older ones.