This is the effect that I want, but is there a way to do it without nested divs? I have tried to combine the transforms, but either I'm missing something simple, or I just need to us JavaScript or jQuery to add and remove classes?
Here is my attempt at combining
.spin{
-webkit-animation: scaleup .5s 1 forwards,
rotate .6s linear .7s 2,
scaledown 1.5s 2.0s 1 forwards;
}
Just as an idea, seven years later, you could think on an approach like the one proposed by "vsync" user in this other post for other problem:
CSS animate custom properties/variables
The idea would be to animate only css vars (with #property) in your "single" animations (scaleup, rotate, scaledown), and have a final animation with just one css transform using those animated values.
#property seems not to be wide supported on browsers (Chrome allows it, i think), and this is only an idea of a possible approach that could or could not work.
If someone test this, please, let us know ;)
Related
It seems there is no CSS #keyframes events? That's because #keyframes can provide quite an easy list of actions or transitions to be performed.
If there is no CSS #keyframes events but we have to use the animationend event, then it seems we have to break down one animation into two or more animations, and line them up using animation-delay:
animation: 3s 0s animation01, 3s 3s animation02;
(the second animation delayed for 3 seconds so that it will happen after animation01) to make them happen one after another, for whatever number of animations there are. But then what really belong to one animation will have to be broken down into multiple animations.
Or are there better methods to do this?
I am trying to use css transition for filter and am getting some weird results in Safari, but works as expected in chrome. My CSS where I set the initial filter and transition (working codepen link below):
transform: translate3d(-50%,-50%,0) scale(1);
filter: blur(0px) contrast(1.1) sepia(0) saturate(1);
transition: transform 1s ease-in-out 1s, filter 1s ease-in-out 1s;
Safari is applying the filter as soon as the class with different filter atributes is added, but then after the transition delay jumping back to the original state, and animating the transition of adding the filter.
Ive recreated the problem in codpen here. It works fine in Chrome, but has the weird state jumping in Safari. Ive tried adding the -webkit- prefixes to the different css elements and their attributes, but maybe im missing something.
Any help is greatly appreciated.
I was able to reproduce a rotating 3D cube in css using online examples. Now I am analysing the code so I learn the meaning of the code and understand how it works.
However there is one thing i don't understand, I know that the "transition" property lets me add an effect when changing from one style to another. (for example changing the width of an element) But in the code that can be found here it's used in a way I don't understand.
-webkit-transition: -webkit-transform 2s linear;
If I leave this piece of code out the cube looks and acts exactly the same, I don't understand what it does and if it is necessary.
Thank you for your help!
-webkit- is the prefix used on WebKit browsers for properties which do not necessarily have full support and are in a testing/experimentation phase. There are a couple of other prefixes in the CSS world too. A few of the more popular ones are: -moz- (Firefox), -o- (Opera), and -ms- (Internet Explorer).
Here -webkit-transition: is the WebKit-prefixed transition property, and -webkit-transform is the WebKit-prefixed transform property.
If we look at Can I Use... for browser support, we'll see that the transition property requires the -webkit- prefix on some mobile browsers. We'll also see that the transform property requires the -webkit- prefix to work on quite a lot of WebKit browsers.
In order to give our transform property a transition on Android browsers, for example, we'd need to use:
-webkit-transition: -webkit-transform 2s linear;
On browsers which fully support both transform and transition, we can achieve the same effect by using:
transition: transform 2s linear;
To be on the safe side, we could also cater for browsers which require the WebKit prefix on the transform property, but may have since dropped the prefix on the transition property - although this may be unnecessary:
transition: -webkit-transform 2s linear;
The thing I dont understand is what the "transform 2s linear" adds to the cube.
This adds a two second linear transition (animation) to the transform property assigned to the cube. Without this the transform property would be changed immediately, but with this the change is gradual over two seconds.
Here is a JSFiddle demo I've whipped up of the transition property in action. Here our first figure instantly changes from red to green on hover, but our second one takes 2 seconds to change.
The transition in the code you've linked to doesn't appear to have any effect on the object at all.
I've had this CSS for some time, and suddenly I noticed it's not working in new versions of Firfox.
-moz-transition: all .3s, top 0s, left 0s;
So the original idea was opacity & scaling transforms would animate while top and left would not animate. I know using "opacity .3s" will work, but I need my scale transform to work also. I'm also aware of the CSS "zoom" property, but that will not work for my needs.
Basically, I just want this to work and I have no idea why this correct CSS is suddenly broken in Firefox. If anyone has an alternative solution, that would be great.
Ssssup doode,
instead of all put transform. Like this:
-moz-transition: -moz-transform .3s, top 0s, left 0s;
example: http://jsfiddle.net/9J5vc/3/
this is a problem with the lastest versions of Firefox and not your code. I have half a dozen sites that are not properly rendering css in firefox at this time. they were all fine not more than a week ago and no change to the code or codebase was made. the styles still work in other browsers.
Firefox is having issues on thier current release of the browser and I am sure they are all aware of it, but really, if it does not get fixed soon, they will loose even more market share. which would be a shame really.
That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 and was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.
To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.
This works for me..
-moz-transition: bottom .3s, right .3s, top 0s, left 0s;
Also make sure your element is still positioned.
Here is the example code: Linky
What I want to do is transition the color, background, and opacity. I works if i do:
transition: all .3s ease-in;
However when I try to do them individually none of them work. I'm thinking it's syntax but I've already spent too long figuring it out, I'm hoping you guys can help me out.
It's working. You have no transition values set for the hover state. But the elements all transition on MouseOut. Add transitions for the hover state if you want transitions there.
Unlike a lot of CSS, transitions require you to put the properties in both states, there's no inheriting of transitions.
All I added was a transition for the hover....