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


Tags: html,css

Problem :

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.


    CSS Howto..

    How is the signed out blur effect achieved on icloud.com?

    How to hide element label by element id in CSS?

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to access my .png from a folder using CSS?

    How to horizontally align to “block” divs inside a div?

    How can I align a group text with seperate Widgets

    How to hover mutiple “div” in the same time?

    How to Display text in Middle of table cell Horizontally and vertically in html css?

    How can I stretch my navigation and content area height to 100% in CSS?

    How do I combine this 2 sets of coding together to form a mega drop down nav

    How to preserve css class name through GWT compilation?

    How to design HTML header

    How to make images to go out of the div when width is over the max-width?

    Attempting to show logo using 'content' from CSS

    How to set css class for Rails date_select year select?

    How to change css position left to right using jquery?

    How to dynamically change CSS class of DIV tag?

    How to add the css properties to an image in ImageResourceCell of CellTable

    How to handle text wrapping in CSS? [duplicate]

    How to create the corner that show in picture with css in webpage?

    html, svg, css how to make mouse event not fire on transparent color

    How to align center without break the user experience?

    How do I fix hover property of a div?

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How quora put that image on their home page? [closed]

    How to display background-image on entire site

    How to reload a css background-image inside a directive

    Codeigniter shows views differently when index is removed

    How i can put a picture above a border in css?

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?