Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Justin Henderson
Justin Henderson
13,739 Points

Stuck on how to call the animation

This is the code that I have so far. I'm experimenting with different animations but have been unable to see the result. 

 h1{
  text-align: center;
  color: #022735;
  font-size: 26px;
  }

 .one,img{ 
   position: relative;
   height: 60px;
   width: 60px;
 }


/*animations*/




@keyframes head-bounce{
  20%{transform: scaleX(2)
                 scaleY(4);
  }
  80%{ transform: rotate(90deg);

  }
  100%{ transform: perspective(50px);

  }
}

1 Answer

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

I don't see any connection between css selector and the animation itself (something like animation-name: head-bounce;. Are you sure you watched the videos? Is this from a course or just your own code? Can you provide everything, not just the css?

Justin Henderson
Justin Henderson
13,739 Points

Hey Maciej,

This is my own code. Here is a link to my codepen so you can see the full context. Thank you for the help.

http://codepen.io/JustinAHenderson/pen/d112c0ec0a7a4bf2b044191c064e6923

p.s- let me know if you have any trouble with the link.

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

This code works after adding some -webkit prefixes:

h1{
  text-align: center;
  color: #022735;
  font-size: 32px;
  font-family:garamond;
  }

h1:hover{
  transform:scale(2);
  }

 .one { 
   position: relative;
   height: 60px;
   width: 60px;
 }

img {
  animation: head-bounce 5s infinite;
  -webkit-animation: head-bounce 5s infinite;
}

/*animations*/

@keyframes head-bounce {
  20%{transform: scaleX(2)
                 scaleY(4);
  }
  80%{ transform: rotate(90deg);
  }
  100%{ transform: perspective(50px);
  }
}

@-webkit-keyframes head-bounce {
  20%{transform: scaleX(2)
                 scaleY(4);
  }
  80%{ transform: rotate(90deg);
  }
  100%{ transform: perspective(50px);
  }
}

Always check some examples in the documentation, for example here: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp