Learn CSS Transforms by Building a Penguin - Step 100

HTML-CSS
1

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0

Challenge: Learn CSS Transforms by Building a Penguin - Step 100

Link to the challenge:

2

Hi everyone!

Please am stock here over a hour now, really don’t know what to do again.

can anyone help out, please?

my code below:

.arm.left {
  top: 35%;
  left: 5%;
  transform-origin: top left; 
  transform: rotate(130deg) scaleX(-1);
  transform: infinite 3s;


}
3

Hey Chuxylen, I see you knocking these challenges out one by one. So the issue in your last style should not be a transform, but it should be “animation” you also need to use the animation name, and a linear timing function both in side the animation

You can look at this if you need to see how to use the animation shorthand

1 Like
4

Still can’t pass.

my code:

.arm.left {
  top: 35%;
  left: 5%;
  transform-origin: top left; 
  transform: rotate(130deg) scaleX(-1);
  animation-name: infinite 3s ease-in-out;
  


}
5

You are still not using the animation name “wave”, and you are not using linear as the directions say. No where in the directions does it say anything about ease-in-out

animation: name duration timing-function delay iteration-count direction fill-mode play-state ;

Edit: It should not be animation-name but it needs to be just animation:

1 Like
6

Still can’t get it.

my code:

.arm.left {
  top: 35%;
  left: 5%;
  transform-origin: top left; 
  transform: rotate(130deg) scaleX(-1);
  animation: infinite 3s;
  


}
7

I think you need to really look at the directions
" Use the wave animation on the left arm. Have the animation last 3s , infinitely iterate, and have a linear timing function."

You are still missing two things.

  1. " Use the wave animation" you need to be using the animation name “wave”
  2. " have a linear timing function" you need to be using linear in your animation

In the animation link I gave the very first example shows 3 out of the 4 things you need. The very first word in the first example is the animation name. Need to follow this structure
animation: name duration timing-function

8

This is how your code should be

Mod edit: removed solution

9

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.