HTML / CSS - How to get a shortcut inside an animation form?

Question

I look at Code School tutorials, and there is a tutorial on animating elements using scaling and repositioning.

The video contains an animation of the label inside the form. When you focus on the input field, the label (which is inside the input field) leaves the input field and scales in size.

I'm trying to replicate - no luck.

What am I doing wrong?

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

edit: I just want to add this transform property, I can get a shortcut for the animation if I have only one animation (scale or translation), but I cannot 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); } 

Answer 1

The syntax for the transform property is not valid. When converting multiple values, they must be separated by spaces (i.e., No commas). See MDN for formal syntax.

So 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, for this to work across browsers, you may also need to change the display element to inline-block so that it is transformable . "

According to specification :

The item to be converted is an item in one of these categories:

an element whose layout is determined by the CSS block model, which is either a block or atomic element of a linear level (i.e. inline-block ), or whose display property is calculated before table-row , table-row-group , table-header-group , table-footer-group , table-cell or table-caption .