Coding issues with CSS3 transform-animation function

Although the hand-in for the previous project happened on Wednesday and we have moved on the next task, I decided to return to my redesign of today because I wasn’t satisfied with the way the pages loaded when viewed online rather than locally.  

The content and article pages slide in from side / bottom using the CSS3 transform-animation, function.  However I found that the animation was happening before all of the img components that make up the cardboard style folder loaded.

After a bit of research on W3 Schools and StackOverflow I thought this would be a fairly quick and simple task by adding the animation-delay function, adding delay to the animation to give the img components chance to load first.

However, it turned out to not to be a simple task at all, and I spent most of the day trying to get the delay function to work properly.  The delay function worked as expected except for the fact that the content/article would disappear as soon as the animation had finished, which hadn’t been an issue before the delay was added.

I decided to isolate the slide function into some raw code, and have a play around with animation/delay functionality without the clutter of code of the project code.  However, it still suffered from the same issue.  

The result of the practice code can be seen here: http:/  This little disappearing red box has been the tyranny of my Sunday!!!

I posted a query to, and somebody did suggest that I add an ‘animation-fill-mode: forwards;’ command to css but this only seemed to work with Firefox.

In the end I decided to scrap the idea of trying to use CSS3 functionality to achieve the sliding transition and instead try to incorporate a jquery function so that only one page is loaded and the content and article slide in from a jquery command – and it worked – phew!

The result can be seen at

I haven’t incorporated the commands into the category links – I have just linked them to two buttons at the bottom of the categories as I want to move on from this project now that I know that it functions OK.  However, I know that it’s going to bug me not being quite complete and no doubt I’ll try to link the slider commands into the <a href> links later in the week…..





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s