by kirupa | 10 October 2013
A large part of what makes animations fun is being able to move things around the screen. When tastefully done and appropriately used, movement is a great way to add some life to your content, bring attention to some UI, provide some active feedback, and so on. It's generally pretty cool.
Hello there. I’m a begginer with animation programmin using CSS, but i’m interested in make a personal website where two of my images are in te center when the page is loaded, but after they split one for each side of the window (left and right). I watched your video explaning the transform and translated3d and it helped me a lot, but ther still one question remaning for me. To organize my layout I’m using columns with 20%, 60% and 20% the width of the screen, so if I whant to make the animation I would have to set percentage instead of pixels to the translated3d function? Is there another way that a can make this animation?
Are you using grid columns? Are your images currently in one of the grid columns?
Without more details, here is my stab at suggestion one potential solution. Your images should be absolutely positioned. You don’t want to modify any layout-related properties, for they will cause a page reflow that is inefficient. To adjust your image’s positions, you will use translate3d like you mention. The x values can be animated from their starting position to an ending position like: calc(100% - 200px) where 200px is the width of your right image. The left image can have its ending position set to something like just 200px.
That might give you the effect you are going for 
:: Copyright KIRUPA 2024 //--