Web Designer Magazine Animation Tutorial Failure

[WebApprentice]

Hi all,

I have just attempted an animation tutorial in a recent issue of Web Designer Magazine which has failed to work properly. The tutorial can be found here:

http://www.webdesignermag.co.uk/tutorials/create-simple-css3-keyframe-animation/

The animation is supposed to show the word “inspires” dropping from the top of the page into the end of the displayed sentence. However, all the code seems to do is present a static image of the text. Am I missing something? I have posted the full page of code from the resource file I found on the CD that came with the magazine below. I hope someone can help as I have just spent the last few hours trying, and failing, to get it to work.

Thanks in anticipation. The complete code is:

MOD EDIT: Codedump Removed

[Atelierbram]

Webkit still needs vendor prefixes, no? Have you tried in Firefox?

http://codepen.io/atelierbram/pen/vHymI

.word {
  -webit-animation-duration: 6s;
  animation-duration: 6s;
  -webit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webit-animation-name: falling;
  animation-name: falling;
  -webit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
} 

@WebApprentice Note that in the CodePen the css is autoprefixed (css-tab -> gear-icon) , (… for next time, instead of a code-dump )

[WebApprentice]

I had not tried it in Firefox, but I have now and it works, but not in Chrome or IE.

So it’s a vendor prefixes issue (I’ll need to research that as I’m not even sure what that means LOL).

Thanks for pointing me in the right direction.

Best wishes :-D

[Author]

Posts