Span не загружает анимацию

Вот в чем дело: я пытаюсь добавить простую анимацию к букве, заключенной в тег span, ей назначен один класс (сама анимация), но он не отображается.

Возможно, мне не хватает фундаментальной вещи, но я бы хотел, чтобы вы это проверили:

.title-pos{
   top: 40%;
    left: 50%;
    position: fixed;
    max-width: 500px;
    top:0
}

.title-style{
    font-size:35px;
    font-family: 'Noto Sans SC', sans-serif;
}

.letter-rotated{
    font-size:70px;
    font-weight:600;
  transition: 1.5s;
}

.letter-rotated{
    animation-name: example2;
    animation-duration: 2s;
    animation-delay: 0s;
    position:relative;
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    -moz-animation-name: example2;
    -moz-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 0s; /* Safari 4.0 - 8.0 */
}

@-moz-keyframes example2{
        0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
    100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@-webkit-keyframes example2 {
   0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
    100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@keyframes example2 {
    0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
    100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

<div class = "title-pos title-style">
                    <span class = "letter-rotated">H</span><span class = "letter-rotated">i</span>
                    </div>

Промежутки являются встроенными, а встроенные элементы не могут быть анимированы. Попробуйте поменять отображение letter-rotated на inline-block

— 06.12.2018 16:39

Спасибо! Вот чего мне не хватало.

— 06.12.2018 16:44

html css

06.12.2018 16:31

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо добавить display: inline-block; в класс .letter-rotated, потому что можно анимировать только блочные элементы.

Также я изменил example2, чтобы использовать обычный transform вместо префикса.

Результат:

.title-pos{
   top: 40%;
   left: 50%;
   position: fixed;
   max-width: 500px;
   top:0
}

.title-style{
   font-size:35px;
   font-family: 'Noto Sans SC', sans-serif;
}

.letter-rotated{
   font-size:70px;
   font-weight:600;
   transition: 1.5s;
}

.letter-rotated{
    display: inline-block;
    animation-name: example2;
    animation-duration: 2s;
    animation-delay: 0s;
    position:relative;
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    -moz-animation-name: example2;
    -moz-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 0s; /* Safari 4.0 - 8.0 */
}

@-moz-keyframes example2{
    0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
  100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@-webkit-keyframes example2 {
    0%   {-webkit-transform: rotate3d(0, 1, 0, 60deg);}
   50%   {-webkit-transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
  100%   {-webkit-transform: rotate3d(0, 1, 0, 360deg);}
}

@keyframes example2 {
    0%   {transform: rotate3d(0, 1, 0, 60deg);}
   50%   {transform: rotate3d(0, 1, 0, 210deg);letter-spacing: -1px;}
  100%   {transform: rotate3d(0, 1, 0, 360deg);}
}

<div class = "title-pos title-style">
  <span class = "letter-rotated">H</span><span class = "letter-rotated">i</span>
</div>

Большое тебе спасибо! Вот и все :)

— 06.12.2018 16:43

06.12.2018 16:39

Другие вопросы по теме

Прокручиваемый мульти-вложенный Flexbox с возможностью прокрутки как родительских, так и дочерних элементов

Сетка элементов, упорядочивающая CSS

Как изменить цвет мата-ошибки (Angular Material)?

Добавить html к ближайшему div кнопки с указанным классом с помощью javascript jquery

Как отправить push-уведомление crome android мобильное устройство pwa

Угловой материал: как применить настраиваемую тематическую типографику к классу CSS вне файла темы?

CSS Grid: перемещение div в первый столбец и увеличение его охвата на 100% при наведении курсора

Кнопка рядом с текстовым полем с изменяемым размером с помощью начальной загрузки

Как заставить webpack помещать простой CSS-код в тег стиля HTML-заголовка?

Генератор викторин и рандомизация в Javascript

Span не загружает анимацию

Ответы 1

Другие вопросы по теме

Похожие вопросы