Блог

В настоящее время я пытаюсь создать потенциально приятный анимационный эффект. Я приблизился к тому, что хочу, но анимация заканчивается внезапно и некрасиво, плюс она перемещается только в одну сторону.

Чего я хочу добиться, так это какого-то эффекта «Двери лифта» в моем тексте. У меня есть только два инициала «CV», которые должны удаляться друг от друга по мере того, как остальной текст исчезает. Это то, что я получил до сих пор:

 .content {
  display: grid;
  place-items: center;
}

.fade-in {
  display: inline-block;
  animation: textFadeIn 2s linear;
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    width: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    width: 6em;
  }
}

.highlight {
  color: cyan;
}

.bold {
  font-weight: bold;
} 

 <div class="content">
  <h1 class="cvPrimary"><span class="highlight bold">C</span><span class="fade-in">urriculum </span>
    <span class="highlight bold">V</span><span class="fade-in">itae</span>
  </h1>
</div> 

Я не уверен, как я могу сделать это правильно. Я не нахожу подходящего свойства, которое позволило бы мне позволить тексту черного цвета занимать все больше места, не будучи уже видимым, и таким образом, чтобы C и V раздвигались довольно симметрично и плавно.

анимация максимальной ширины может здесь хорошо сработать:

 .cvPrimary {
  text-align: center
}

.cvPrimary span {
  max-width: 20px; /* you may have to adjust this */
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  color: transparent;
  animation: textFadeIn 2s 0.5s forwards
}

.cvPrimary span:first-letter {
  color: cyan;
}

@keyframes textFadeIn {
  70% {
    color: transparent;
  }
  100% {
    max-width: 200px; /* a big value here */
    color: #000
  }
} 

 <h1 class="cvPrimary">
  <span >Curriculum </span>
  <span >Vitae</span>
</h1> 

Очень хорошая попытка. Давайте разберемся, почему возникла ваша проблема.

1. Почему только буква C перемещается влево, а V остается на своем месте во время анимации?

   

   Как вы можете видеть на этом скриншоте, левый блок C и правый блок V растут с одинаковой скоростью, в этом случае C может перемещаться влево, а V — нет, потому что блок h1 уже центрирован внутри контейнера.

2. Почему анимация внезапно заканчивается?

   После завершения анимации стиль CSS возвращается в исходное состояние без анимации. Итак, если стиль конечной анимации и отсутствие анимации отличаются, что произойдет? стиль внезапно изменится с конечной анимации на отсутствие анимации. Это решается с помощью animation-fill-mode: forwards;

Давайте перейдем к решению

1. Прежде всего, у нас должна быть точная ширина каждого исчезающего блока в анимации ключевого кадра. итак, у нас должно быть 2 ключевых кадра, один для левой стороны (C), другой для правой стороны (V)

    .content {
         display: flex;
         justify-content: center;
       }
   
       .fade-in {
         display: inline-block;
         animation-fill-mode: forwards;
         animation-duration: 2s;
         animation-timing-function: linear;
         overflow: hidden;
         vertical-align: bottom;
       }
   
       .fade-in.left-side {
         animation-name: textFadeInLeft;
       }
   
       .fade-in.right-side {
         animation-name: textFadeInRight;
       }
   
       @keyframes textFadeInLeft {
         0% {
           opacity: 0;
           max-width: 0;
         }
         90% {
           opacity: 0;
         }
         100% {
           opacity: 1;
           max-width: 4.375em;
         }
       }
   
       @keyframes textFadeInRight {
         0% {
           opacity: 0;
           max-width: 0;
           /*margin-right: 70px;*/
         }
         90% {
           opacity: 0;
         }
         100% {
           opacity: 1;
           max-width: 1.5625em;
           /*margin-right: 0;*/
         }
       }
   
       .highlight {
         color: cyan;
       }
   
       .bold {
         font-weight: bold;
         display: inline-block;
         vertical-align: bottom;
       } 

    <div class="content">
     <h1 class="cvPrimary"><span class="highlight bold">C</span><span class="fade-in left-side">urriculum </span>
       <span class="highlight bold">V</span><span class="fade-in right-side">itae</span>
     </h1>
   </div> 

   Запустите фрагмент кодаСкрыть результаты

   Развернуть фрагмент

   Несмотря на то, что скорость перемещения C и V различна, потому что для C и V расстояние перемещения отличается друг от друга.

Каким будет решение для этого?

2. Если конечный блок анимации должен быть центрирован внутри контейнера, мы должны настроить начальную позицию CV, чтобы она была расположена в центре конечных C и V позиций анимации.

Это будет достигнуто за счет правого поля для правого V-блока.

 .content {
      display: flex;
      justify-content: center;
    }

    .fade-in {
      display: inline-block;
      animation-fill-mode: forwards;
      animation-duration: 2s;
      animation-timing-function: linear;
      overflow: hidden;
      vertical-align: bottom;
    }

    .fade-in.left-side {
      animation-name: textFadeInLeft;
    }

    .fade-in.right-side {
      animation-name: textFadeInRight;
    }

    @keyframes textFadeInLeft {
      0% {
        opacity: 0;
        max-width: 0;
      }
      90% {
        opacity: 0;
      }
      100% {
        opacity: 1;
        max-width: 4.375em;
      }
    }

    @keyframes textFadeInRight {
      0% {
        opacity: 0;
        max-width: 0;
        margin-right: 70px;
      }
      90% {
        opacity: 0;
      }
      100% {
        opacity: 1;
        max-width: 1.5625em;
        margin-right: 0;
      }
    }

    .highlight {
      color: cyan;
    }

    .bold {
      font-weight: bold;
      display: inline-block;
      vertical-align: bottom;
    } 

 <div class="content">
  <h1 class="cvPrimary"><span class="highlight bold">C</span><span class="fade-in left-side">urriculum </span>
    <span class="highlight bold">V</span><span class="fade-in right-side">itae</span>
  </h1>
</div> 

И я использовал гибкую компоновку вместо компоновки сетки. вы можете переключить его как макет сетки, я проверил, что он правильно работает с макетом сетки. Но я рекомендую использовать гибкую компоновку.

Вам может показаться, что это немного «жестко запрограммировано», но, по моему опыту, хорошего результата без особых усилий не добиться.