-1

Currently working this project but was stuck on the letter transitioning. (code). For simplicity sake I will only have the relevant code for letter effect.

.form-control label span {
    display: inline-block;
    min-width: 5px;
    font-size: 18px;
    transition: .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus + label span,
.form-control input:valid + label span {
    transform: translateY(-30px);
    color: lightblue
}
<div class="form-control">
    <input type="text" required>
    <label>
        <span style="transition-delay:0ms;">E</span>
        <span style="transition-delay:50ms;">m</span>
        <span style="transition-delay:100ms;">a</span>
        <span style="transition-delay:150ms;">i</span>
        <span style="transition-delay:200ms;">l</span>
    </label>
</div>

My Question is why does the .form-control label span need to have the display: inline-block property to actually have the letters transform: translateY(-30px)? When it the inline-block is not present, the letters do not move at all.

Thanks for the help in advance for understanding this.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Owen Murphy
  • 153
  • 1
  • 10

1 Answers1

0

It's because the default display of a span is inline, so it's not considered as a block.

Also, you can not use the transform property on an inline element, it should be used on a block or inline-block.

Julian
  • 30
  • 4