I have apparent gaps in my CSS experience. While I can easily apply and extend what I do know, I'm missing the terms to even search for what I don't know.
So, I've taken parts of Animation.css and applied them, but I don't know how to constrain the bounds of animations like bounceInUp. When the animation happens, the transition seems to have no bounds. I'd like to constrain the bounds of the animation so that it starts and finishes inside its container.
What am I trying to do here? Constrain the bounds, clip the animation, mask it? I've been digging and haven't found what I'm looking for yet.
The best solution I've found is to set the starting position in the CSS's translate3d(). Not sure if that is the "right" way, but it has the right effect for me. I'm not sure what I was expecting to find; however, I don't particularly like this approach because I'll have to tweak the animation CSS based on the size of the container element. I'd prefer to just code the CSS solution once and freely resize containers.
#keyframes bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
/* Set the y length(?) / offset position */
transform: translate3d(0, 300px, 0);
}
}
Related
I wanted to draw a curved animation and after a lot of doing monkey coding I get the desired result. But I'm stuck how does this work!
Look this picture: demo
Now look this picture too: demo
I got the desired animation that is curved animation after just removing left: 50px; from 50% keyframes
But, I wanted to know how this is becoming curved as it's initial position is left: 50px;, not? Even if I don't place the left value it should go like previous but amazingly it's curving. So anyone have some idea about this?
From MDN - #keyframes
When properties are left out of some keyframes
Any properties that you don't specify in every keyframe are interpolated
And it seems the values are interpolated midway from the current to the next given value, using the animation-timing-function, which is ease in your case.
When you change the timing function to linear for example, you get a straight line
#ball {
animation-timing-function: linear;
}
See modified JSFiddle
Finally I got it now that how this works.
When one property is left(i.e. removed) then it's value is increased accordingly.
Example:
0%{bottom: 0%; left:0%;}
50%{bottom: 0%;}/*the left property is left(removed)*/
100%{bottom: 100%; left: 100%;}
In the above code the value of left in 50% is initial(animation from 0%) = 0% and end point (animation to 100%) = 100%.
So here the bottom value will be the same defined in 50% keyframe but the value of left will increase accordingly that is
from 0% to 1%, 2%, 3%, 4%, and so on. Likewise, if you left(remove) the bottom property and keep(add) left property then it
will increase the value of bottom accordingly.
See this demo to make your concept clearer.
Hence the demonstration in the question is being viewed curved.
By the way of this concept I've made a demo to make a circular animation also.
P/s: the animation-timing-function rather than ease works differently.
Try this yourslef::demo by changing the value from ease to anything you want such as ease-in-out.
let's say i have a parent container which is set to
-webkit-transform: perspective(300px) rotateX(45deg);
-webkit-transform-origin: 50% 100% 0%;
and inside it is a number of items in which i don't want to have that styling.
what do i have to do? set its transform values to 0? like
-webkit-transform: perspective(0px) rotateX(0deg);
-webkit-transform-origin: 0% 0% 0%;
i have a sample jsfiddle here : http://jsfiddle.net/8cUPL/1/
The transform-* properties, like opacity and some other rendering-related ones, don't 'inherit' in CSS meaning of inheritance. Instead, they apply the visual changes to the element as a whole, including all its descendants. Applying something like transform: none; to these descendants doesn't have any visible effect, it means only that these elements are not transformed by themselves, but they still are transformed with the parent element — not because they 'inherit' its style, but because they are parts of its appearance.
The only way to visually 'undo' the transform of the parent element for a descendant (i.e. make it look as non-transformed) is to specifically transform it so that the result of this transform would look from the given perspective the same as it would look without transform at all. To make this possible, the transformed element itself and all intermediate ancestors of the given element must have transform-style: preserve-3d. The needed 'compensating' transform can be calculated from the resulting 3D scene or just be constructed by adjusting transform values through trial and error, e.g.
.items{
...
transform: translate3d(-51px, 11px, 29px) rotateX(-45deg);
transform-origin: 50% 100% 0px;
}
(see JSfiddle).
Unfortunately, this workaround is not compatible with overlow:hidden because it (along with some other properties) effectively removes transform-style: preserve-3d. So, if you need to clip the overflowed parts of the transformed element and to 'undo' the transform of its part in the same time, the only solution suitable for you would be to organize the code so that this part would not be the descendant of the transformed element anymore.
You mean you want the items to behave as if they are not part of the perspectived container at all? No, that is not possible.
You can, however, use a bit of Javascript to take the items of out the container and put them elsewhere in the DOM tree. Then they will be free of the perspective.
var container = document.getElementById('container');
var items = container.getElementsByClassName('items');
for (var i = items.length-1; i>=0; --i) {
var el = items[i].cloneNode(true);
var itemparent = items[i].parentNode;
itemparent.removeChild(items[i]);
container.parentNode.insertBefore(el, container);
}
Fiddle
The perspective and its -origin don't actually do anything on their own.
To remove the transform of a child element just reset its transform like so:
transform: none;
I have a div which is already rotated, however all content within it is transformed in the same fashion.
I have plugged a fiddle below to better illustrate what I am trying to achieve.
What would be the proper way to transform the image of the 'moon' so that it maintains it's original shape as it travels the path?
Simple: Make the moon rotate in the opposite direction!
http://jsfiddle.net/hsntY/3/
#moon { width:150px; animation:RotateRev 15s linear infinite;}
#keyframes RotateRev
{from {transform:rotate(360deg);}
to {transform:rotate(0deg);}}
(also, I can understand if it was just for example or something, but you should use the standard spec AND have prefix fallbacks)
The proper way to transform the image is applying the oposite transforms that you have applied to all the elements.
In your case, that includes the rotateX and rotateY in the path, and the rotate in the animation.
for this to work ok, you also need to specify -webkit-transform-style: preserve-3d; so that the transformations can really undo the previous transforms.
There is a problem, though, and I think this is a Chrome bug: when you apply a keyframes animation, preserve-3d stops working.
So, sorry to say, I am unable to make it work; and I think that it is not posible if this bug isn't corrected. May be in another browser ?
you can check the static correct fiddle correct fiddle without animation
You can see there also the inverse keyframes animation, that you would need to make it work.
I would suggest you to create the elipse scaling the circle in the plane, instead of rotating it in 3D, I believe you can make that work this way
The CSS end like that:
#Path{margin:5% 15% auto; position:relative;
height:500px;width:500px;
background-color:rgba(0,200,200, .1);
border:1px solid black;
border-radius:300px;
-webkit-transform:perspective(0px) rotateX(50deg) rotateY(25deg);
-webkit-transform-style: preserve-3d;}
#moonContain {width:500px;height:500px;position:absolute; margin-left:-0.5%;
-webkit-transform-style: preserve-3d;
}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(0px) rotateX(-50deg) rotateY(-25deg); }
#-webkit-keyframes Rotate
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}}
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}}
Correction
I wrongly interpret the problem that arises when you set the animation in the moon itself; and I thought it was a bug in Chrome. What it really was happening was that the animation was animating the transform property, and that undoes the transform property specified in the moon itself.
Correct answer:
set both transforms in the animation, even though the later is constant:
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg) rotateX(-50deg) rotateY(-25deg);}
to {-webkit-transform:rotate(0deg) rotateX(-50deg) rotateY(-25deg);}}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-animation:counterRotate 15s linear infinite;}
Correct demo
I am stuck on defining an css3 cube completely with percent.
Here a short example in Codepen
http://codepen.io/anon/pen/detAB
As you can see the cube faces have 100% width and height of its parent element, which works perfect. Now i am trying to translate the bottom face 50% down and 50% back.
with pixel values this is no problem
transform: rotateX(-90deg) translateZ(50px) translateY(50px);
but with percent nothing happens
transform: rotateX(-90deg) translateZ(50%) translateY(50%);
is there any other way? or am I missing something?
The percentage there is not of the parent container in the way you might expect but of the element itself. The spec describes it as:
[The percentage] refer[s] to the size of the element's box
Regarding %s, the spec says:
Note that values are not allowed in the translateZ
translation-value, and if present will cause the propery value to be
invalid.
Though, it seems that instead, they aren't valid in any of them for Chrome at least.
Sorry :(
The best I've found is by doing a bit of javascript.
Instead of using the translateZ() value, I've used the transform-origin: x y z for the axis to be at the center of the cube.
The point is that the cube can turn on its center (and not turn on a center of the main face and translate z...)
Here is the jQuery function (eventually to apply on $(document).ready() and $(window).resize()) :
function get50() {
var half_width = $('#front').width() / 2;
$('#front').css({
transformOrigin : '50% 50% -' + half_width + 'px'
});
}
You can see a DEMO here...
I have a simple CSS3 keyframe animation that I would like to reverse while it runs.
See the code here: http://jsfiddle.net/breizo/EUVAv/
#-webkit-keyframes transform-keyframes {
0% {-webkit-transform:translateX(0px) translateY(0px) rotate(270deg);}
25% {-webkit-transform:translateX(200px) translateY(0px) rotate(270deg);}
25.01% {-webkit-transform:translateX(200px) translateY(0px) rotate(0deg);}
50% {-webkit-transform:translateX(200px) translateY(200px) rotate(0deg);}
50.01% {-webkit-transform:translateX(200px) translateY(200px) rotate(90deg);}
75% {-webkit-transform:translateX(0px) translateY(200px) rotate(90deg);}
75.01% {-webkit-transform:translateX(0px) translateY(200px) rotate(180deg);}
100% {-webkit-transform:translateX(0px) translateY(0px) rotate(180deg);}
}
Anybody has a trick to prevent the animation from jumping to another keyframe than the current one?
It looks like it is jumping to the keyframe symmetrical to 1/2 of the duration.
Any input is greatly appreciated.
I had the same flavor of jumpiness using CSS to animate a 3D carousel product catalog In two directions based on :hover.
Having fiddled with obvious ideas like animation-fill-mode:forwards and such with not the least good fortunes what finally solved it was to mix in two bits of transition syntax with a tiny duration and the transform itself as the property. In the course of transition chasing to catch transform's state ,it's updates To the element being transformed remained intact , and the effect seems to fit the specs , so it should be a valid solution
transition-duration: 0.2s;transition-property:transform;
pardon any typos ,as I"m using a pad.
After much hair pulling (not much left...) I ended up using the excellent greensock library: http://www.greensock.com/gsap-js/
It gives much more control to the whole animation.