HTML/CSS - How to get label inside form to animate?

So I’m watching tutorials on Code School, and there is a tutorial on animating elements via scaling and changing positioning.

The video is on animating a label inside a form. When you focus on the input field, the label (which is inside the input field) moves out of the input field, and scales down in size.

I’m trying to replicate – with no luck.

what am I doing wrong?

https://jsfiddle.net/8tvh4x45/1/

Thanks so much and happy new year everyone!

edit: just want to add that for the transform property, I can get the label to animate if I only have one animation (scale or translateY) – but I can’t get both to work together.

<fieldset class="form-field">
  <input class="form-input" type="text" id="name">
  <label class="form-label" for="name">First Name</label>
</fieldset>
.form-field {
  border: 0;
}

.form-input {
  position: absolute;
}

.form-input + .form-label {
  position: relative;
  transition: transform 1s;
}

.form-input:focus + .form-label {
  transform: scale(0.8), translateY(50px);
}

solution

The syntax for the transform property is invalid. When transforming multiple values, they should be separated with spaces (i.e., no commas). See MDN for the formal syntax.

Therefore you need to remove the comma in transform: scale(0.8), translateY(50px).

Updated Example

.form-input + .form-label {
  position: relative;
  transition: transform 1s;
  display: inline-block;
}

.form-input:focus + .form-label {
  transform: scale(0.8) translateY(50px);
}

As a side note, in order for this to work across browsers, you may also need to change the display of the element to inline-block in order for it to be “ transformable”.

According to the spec:

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element (i.e., inline-block), or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.