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 to make Instagram.js feed responsive in Bootstrap?

    How i can adjust the all elements that web page has?

    How can I conditionally change css styles with js?

    How to make CSS border-image work

    How to disable [marquee] tag with CSS? Is this possible?

    How to create smooth headlines with HTML and CSS?

    How to make slanted ribbon

    how to: dynamically switch css page

    How to remove css from DOM

    How to remove background from breadCrumb

    How to add background video stop button

    How to apply customized css to SSRS report

    Spring, Prime Faces application not showing CSS when deploying to Heroku

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    How to use Effeckt.css?

    How do I change the colours of multiple buttons, each into different ones when hovered?

    How to set % height in fluid layout?

    How to create a curve tail for speech bubble with CSS?

    How to set width and text-align for button with CSS

    How to get WordPress Twenty Ten theme sub-menus to expand to their contents (CSS)?

    How to add css styles on aria-hidden attribute

    How do I add another css to Bootstrap?

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    how to increase the font-size without making it thicker

    how to center a form using css?

    Why my easypie number don't show inside?

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to change CSS portrait to landscape in iphone?

    How do I vertically align the text to the middle using CSS?

    How to write page specific CSS in backbone js