Передача параметров в css-анимацию

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Для приведенного выше кода CSS анимации мне интересно, есть ли способ передать значения margin-left и width в качестве параметра из Javascript.

Не уверен, что вы можете сделать это напрямую, но вы могли бы установить переменную css с помощью javascript, а затем использовать эту переменную в своем @keyframes.

— 10.04.2018 11:50

css css-animations keyframe

10.04.2018 11:47

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

4 414

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

Ответы 2

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

Используйте переменные CSS, и вы легко можете это сделать:

document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

.p1,.p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p class = "p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class = "p2">
  This will animate because we changed the CSS variable using JS
</p>

10.04.2018 11:51

Возможно, другой способ сделать это - использовать: Element.animate ()

var m = "100%";
var w = "300%";

document.getElementsByClassName('p2')[0].animate([{
        marginLeft: m,
        width: w
    },
    {
        marginLeft: '0%',
        width: '100%'
    }
], {
    duration: 2000,
});

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<p class = "p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class = "p2">
  This will animate because we changed the CSS variable using JS
</p>
</body>
</html>

24.09.2020 13:56

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

Как установить задержку анимации в тикере новостей на чистом CSS

Почему не работает CSS3-анимация?

Переход к анимационному контенту Vue и Vuetify

Css-анимация для элемента <path> в SVG не работает для mozilla

Переход CSS из анимированного состояния

Изображение / div с помощью css translate

Боковая панель с анимацией rotate3d в макете сетки

Изменение размера текстового поля с переходом тормозит

Попытка сделать слайд-анимацию моих кодов, которую я сделал в CSS, но не удалось

Список CSS постепенно исчезает с неизвестным количеством

Передача параметров в css-анимацию

Ответы 2

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

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