Codepen Project

Project Feedback
#1

Hi,
This doesn’t apply to any challenges, but I thought that I would mess around and create some of my own things while also working here in FreeCodeCamp.
I’ve been working off and on this particular pen for almost half a year now, and am running into some difficulties. I want to add animated cards to the page, and I wanted to use the keyframes attribute to do it, (since that’s the only animating code that I’ve learned so far). However, its not going very well, in fact, the keyframes aren’t working at all and I have no clue why. So, I have a couple questions.

  1. Do keyframes only work for graphics and images, nothing that contains text?
  2. Is there a typo in my code that may be causing the problem?
  3. or am I coming at this from the entirely wrong angle?

Here is the pen: https://codepen.io/NeonFoxX/pen/OJNBNQZ

Any suggestions or answers would be helpful, I have no deadline for this project, so there’s no rush, but I would like to fix this soon. Thanks!
-Crow

#2

I just took a quick glance @Crow. Didn’t dive too deep yet but a couple of things for you to do;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. Remember, an id must be unique within the document.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
#3

Your keyframes are running. I can see the opacity go from 0.1 to 1 in 2s. But your left/right properties are not working because .fullcard is not a positioned element (i.e. it’s position property is static instead of something like absolute/relative).

I’m not sure what effect you are trying to pull off here. If you describe a little more what you are trying to do then someone might have a suggestion. Also, don’t be afraid to use your favorite search engine to look for examples.

Also, to specify multiple animation-names you use a comma separated list of names on a single instance of animation-name.