Question: I have a circle, consisting of 12 arc segments and I want to allow the user to see the transition from the start pattern to the end pattern. (there will be many start and end patterns).

I have included the transition property in the css file, so that is not the issue.

Here is my code so far:

```
function playAnimations(){
console.log("gets inside playanimations")
var totalLength = document.getElementsByClassName("container")[0].children.length
console.log(totalLength)
for(var i = 0; i < totalLength; i++){
    var current_pattern = document.getElementsByClassName("container")[0].children[i]
        for(var j = 0; j < 12; j++){
            $('#LED' + (j+1) ).css('transition-duration', '0s');
            $('#LED' + (j+1) ).css({fill: current_pattern.children[1].children[j].style.backgroundColor});

        }

        for(var k = 0; k < 12; k++){
            $('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms");
            $('#LED' + (k+1) ).css({fill: current_pattern.children[2].children[k].style.backgroundColor});

        }    

}
}

```

The outer for loop traverses through all the patterns while the inner two for loops traverse through the start and end values for that particular pattern. The problem I am having is that I only see the end colors on the circle and not the start colors.

Does anyone know a good workaround or what I could possibly do to rectify this issue? Any feedback or help is appreciated.

Answer: 
Give your Elements a `transition-delay` value. Of course a different one for each, like this

```
#LED1 {
    transition-delay: 0.1s;
}

#LED2 {
    transition-delay: 0.2s;
}

...

#LED2 {
    transition-delay: 1.2s;
}

```

That should do it. You should be able to set the `transition-duration` directly in the **CSS** as well, no need for JavaScript I think.

Is there a special reason to have 2 inner for loops? Shouldn't one doing both be sufficient?
1. Check the transition properties you need to define

```
transition-property*
transition-duration*
transition-timing-function
transition-delay 

```

transition-delay could help you to concatenate transitions if you set it using a js loop.
2. Check your function is getting and setting the right values (a quick check in chrome's dev console will help you)
3. Are you sure you want to get elements by **container** as class? As it's a common name for divs, you may be getting some unwanted elements in your function. I'd recommend changing the class to another less common name.
4. Why two loops? I imagine the first one is for resetting the colors before the actual transition as you define `transition-duration:0s;` The second one would be the actual transition?.
5. The problem I see in each loop is you set css in two lines (separated with a ;). 
Try `$('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css({fill: current_pattern.children[2].children[k].style.backgroundColor});`.

And maybe changing fill to background-color

`$('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css('background-color', current_pattern.children[2].children[k].style.backgroundColor);`

You can find all the docs about transitions at [W3C](https://www.w3.org/TR/css3-transitions/)!