The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Web Designer Magazine Animation Tutorial Failure

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #171348

    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:

    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


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

    .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;

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


    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design’ is closed to new topics and replies.