Анимация тени текста в CSS

У меня есть следующий код, в котором я делаю анимацию в CSS, перемещая div. Но я хотел также анимировать тень текста, имитируя каким-то образом вес моего текста:

div#main {
    background-color: #2E2E2E;
}

div#lblCaption {
    margin-bottom: 0px;
    color: #C7C7C7;}
    
div#NodeCaptionContainer{     
    animation-duration: .7s;
    animation-name: fadeAndScale;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fadeAndScale {
    from {
        opacity: 0;
		transform: scale(.9, .9);
		text-shadow: 0 0 .75px rgb(255, 255, 255), 0 0 .75px rgb(255, 255, 255);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
		text-shadow: 0 0 .0px rgb(255, 255, 255), 0 0 .0px rgb(255, 255, 255);
    }
}

<div id = "main">
  <div id = "NodeCaptionContainer">
          <div id = "lblCaption" class = "pretty p-default p-thick p-pulse"><p class = "noMargin">&nbsp;&nbsp;&nbsp;&nbsp;Node: 1:9 &nbsp;&nbsp;&nbsp;&nbsp; Type: Function &nbsp;&nbsp;&nbsp;&nbsp; Read: 480B &nbsp;&nbsp;&nbsp;&nbsp; Write: 1088B &nbsp;&nbsp;&nbsp;&nbsp; </p></div> 
  </div> 
</div>

Проблема в том, что анимация для перевода выполняется animation-timing-function плавно, но не для тени. Я хотел также сгладить переход тени. Есть ли способ сгладить переход тени в CSS?

html css

20.03.2018 17:41

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

859

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

Ответы 1

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

https://jsfiddle.net/Liamm12/6d9p5uun/67/

Определил text-shadow в NodeCaptionContainer и использовал forwards, чтобы не возвращаться к тому же коду NodeCaptionContainer, а затем скрыть его с помощью keyframes

div#main {
    background-color: #2E2E2E;
}

div#lblCaption {
    margin-bottom: 0px;
    color: #C7C7C7;}
    
div#NodeCaptionContainer{     
    -webkit-animation: fadeAndScale .7s ease-in-out forwards;
    animation: fadeAndScale .7s ease-in-out forwards;
    text-shadow: 0 0 .75px red, 0 0 .75px red;
}
@keyframes fadeAndScale {
    from {
        opacity: 0;
		transform: scale(.9, .9);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
		text-shadow: 0 0 0 rgb(255, 255, 255);
    }
}

<div id = "main">
  <div id = "NodeCaptionContainer">
          <div id = "lblCaption" class = "pretty p-default p-thick p-pulse"><p class = "noMargin">&nbsp;&nbsp;&nbsp;&nbsp;Node: 1:9 &nbsp;&nbsp;&nbsp;&nbsp; Type: Function &nbsp;&nbsp;&nbsp;&nbsp; Read: 480B &nbsp;&nbsp;&nbsp;&nbsp; Write: 1088B &nbsp;&nbsp;&nbsp;&nbsp; </p></div> 
  </div> 
</div>

20.03.2018 19:28

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

CSS font-face не работает на телефоне

Какая-то граница окружает мою веб-страницу, пока я пытаюсь сделать параллакс

Горизонтальное выравнивание h3 и h5

Таблица kable некорректно отображается на веб-сайте

Псевдоэлемент перекрывает основное содержимое, хотя использует z-index

Я хочу добавить изображения к ссылкам с помощью javascript

ASP.net Bootstrap 4 Navbar Input Caret Issue Только для iOS

Отрегулируйте яркость карты листовок с помощью свойства filter css

Почему я не могу изменить цвет навигационной ссылки в CSS?

Как сделать div с прокручиваемым содержимым в середине страницы адаптивным по высоте, когда высота верхнего div является динамической

Анимация тени текста в CSS

Ответы 1

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

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