Animations on Codepen not working?

1

Hey there,

I’m currently working on the Tic-Tac-Toe challenge and wanted a bit of ‘cool’ animation to jazz it up a bit.
However I can’t get any of the @keyframes animations to work on Codepen, here is an example of what does not work -

@keyframes slidein {
  from {
    margin-left: 300%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.opening-title {
  text-align: center;
  margin-top: calc(5px + 2vw);
  font-family: Just Me Again Down Here, cursive; 
  font-size: calc(45px + 5vw);
  animation-name: slidein;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

I thought it might be something to do with CSS settings, but I added the animate.css and fiddled with the other options but still couldn’t get any animations to play (I’ve tried colour change, resizing, etc.).

I’ve included my pen and a picture of my CSS settings, can anyone please let me know why they are not working? It’s driving me nuts!!

Thanks,
Stu

CSS Noughts and Crosses.png1920×1080 145 KB

2

I am not quite sure why, but if you delete a couple of spaces at the beginning of the following line in your CSS, the animation starts working. I guess there were some invisible characters at the beginning of the word animation that were causing it not to recognize the word.

animation-duration: 4s;

I found this when I deleted this line and retyped it.

2 Likes
3

Wow, that fixed it!

Thank you so much, I have no idea how that happened as I typed it myself, but it works now!

Cheers.