Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple value CSS properties

See original GitHub issue

Hi, I was attempting to animate between CSS properties with multiple values. For example, backgroundPosition: ['0 0%', '0 100%'], Also, it would be nice to do this with CSS values that accept multiple declarations, like multiple backgrounds. backgroundPosition: ['0 0, 0 0%', '0 0, 0 100%'], I was having trouble animating values that contained more than one number, but this could be useful for colors also: backgroundImage: ['linear-gradient( 90deg, #eee, #fff)', 'linear-gradient( 90deg, #ccc, #fff)'];

Not sure if I’m doing something wrong. I tried using a + to add string values to the number I wanted to animate, and that didn’t work either.

Also, I couldn’t get it to synchronize animating a clip path from an initial value (or one set with CSS) the first time an animation is played.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

juliangarniercommented, Feb 22, 2017

Is there any way to add a custom duration to a specific property?

Yes like this:

var animation = anime({
  targets: gradients,
  start: {
    value: '#8453E3',
    duration: 4000,
    easing: 'easeOutExpo'
  end: {
    value: '#FBF38C',
    duration: 2000,
    easing: 'easeOutQuad'
BrisaBoardscommented, Jan 28, 2020

@kalpriksh If you click the settings icon next to the JS box, you can click in the CDN search box, type animejs, select the first one, and when you close it, it’ll reload and start working 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add multiple values in a single CSS property | by Adir SL
Why Use Multiple Values in CSS. Every CSS rule consists of at least 3 parts: Selector, property and value(s), as you can see...
Read more >
When a CSS property can have multiple values, are those ...
The technical answer to your question is that it depends entirely on the property itself. But generally, yes, whitespace is used to separate ......
Read more >
How To Declare Values For Multiple Properties In a CSS Rule
Declaring multiple properties in a single rule allows you to apply many style instructions—such as size, color, and alignment—to an element all ...
Read more >
Multiple Attribute Values - CSS-Tricks
CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs....
Read more >
The two-value syntax of the CSS Display property
The display property is how we change the formatting context of an element and its children. In CSS some elements are block by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found