Animations in HTML5 using CSS3

So, I got this code: <!doctype html> <html> <head> <title> Hello :) </title> <style> body{ background:blueviolet; margin:0px; } .wrapper{ width: 70%; height: 300px; background-color: red; } #a1{ width: 10%; height: 33.333%; background-color:blue; animation: a1-move 3s linear forwards; } @keyframes a1-fill{ 0%{} 50%{} 100%{width: 100%;} } @keyframes a1-move{ 0%{} 50%{} 100%{transform:translateX(100%);} } </style> </head> <body> <div class="wrapper"> <div id="a1"> </div> </div> </body> </html> When I apply "animation: a1-fill 3s linear forwards;" to "a1": it fills the whole "wrapper" class as expected. However, if I apply "animation: a1-move 3s linear forwards;" to "a1": the <div> container with id "a1" does not move till the end. What do I miss?

html css html5 css3 animation

16th Jul 2017, 2:43 PM

Allaberdi Abdyrasulov

4 Answers

+ 5

All explained in code comments: https://code.sololearn.com/WgprNTvsH3qh/?ref=app Feel free to ask for what you don't understood ;)

16th Jul 2017, 3:28 PM

visph

+ 3

I've explained in code comment: % unit inside 'transform' is relative to the element itself, not to its parent: 100% will move it from its width size, and 900% will only work as expected if the parent is exactly 10 times wider than element width...

16th Jul 2017, 4:35 PM

visph

"/* use an positionned mode rather, to move the element */" I think it wouldn't be effective if you didn't put the 29-th line. I think, I found a better explanation why I couldn't manage it: If I'm not wrong, the translateX() function calculates the position not according to the parent of the attached id/class (not ".wrapper"), it does it according to the attached id/class. So the solution is: "100%{transform:translateX(900%);}" - in "@keyframes a1-move"

16th Jul 2017, 4:28 PM

Allaberdi Abdyrasulov

I'm a little confused... Thank you for your answer!

16th Jul 2017, 4:46 PM

Allaberdi Abdyrasulov