I'm creating a mixin that will allow me to do prefix free styles for transform: rotate(45deg). The problem is that I have no idea how to do it in proper Stylus syntax. Here's what I have so far:
transform-rotate()
-webkit-transform: rotate(arguments)
-moz-transform: rotate(arguments)
-o-transform: rotate(arguments)
-ms-transform: rotate(arguments)
transform: rotate(arguments)
And then I would like to call it in my .styl sheet using the following:
transform-rotate(45deg)
But when I do that, I get the following error:
Cannot call method 'map' of undefined
I think the problem is that Stylus is trying to treat the native CSS3 rotate() mixin as a custom mixin, and when it tries, it can't find the implementation of rotate(). I'm not entirely sure, but that's my initial thought.
How do I write this out so that it'll compile properly? Any ideas would be greatly appreciated. Thanks in advance.
You don't need parentheses with Stylus, problem solved !
transform-rotate
-webkit-transform rotate arguments
-moz-transform rotate arguments
-o-transform rotate arguments
-ms-transform rotate arguments
transform rotate arguments
And I'd advise you to use Nib, a stylus plug-in that handles browser prefixing : http://visionmedia.github.io/nib/
Related
I'm using SCSS at the moment and that works wonderfully for giving me the ability to use variables and such, but it also gives me the ability to write functions which output the following if I gave it -90:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
I'm wondering if there are any staple engines that do this for all properties in CSS3, so you can simply write transform: rotate(-90deg) and at compile, it uses all the different properties that it can have, such as webkit, moz, ms, o and whatever other possibilities like filter: progid:DXImag..blah..mage(rotation=3); for IE also so it's all universal for browsers.
You should take a look at AutoPrefixer, which you can add to your build system and does exactly what you want. It can even add prefixes only for properties where it is still necessary based on Can I Use data.
why is this not working?
transform: scale3d(0.5,0.5,0) translate3d(-50%,-50%,0);
It only works without the "scale" part, but I thought I was able to pass multiple attributes into the transform.
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
I'm trying to animate a sidebar and it seems to be working in all browsers except the android stock browser on my galaxy s3 (android 4.1.2).
I've looked around and it seems there's trouble with translate 3D and reading the end Animation trigger but that seems to be relevant for older versions of the browser.
To animate the sidebar I'm doing a 0 to 60% translation. Relevant css below.
transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-webkit-transform: translate3D(0,0,0);
transform: translate3D(60%,0,0);
-moz-transform: translate3D(60%,0,0);
-webkit-transform: translate3D(60%,0,0);
Never mind, it was a CSS issue. Be careful when you use the '~' CSS selector. I changed it to '+' and it worked. The actual animation is still laggy and flickers though but at least it works.
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.