.psc-TestBackgroundStyle {
background-color: #FF0000;
}
@keyframes psc-TestBackgroundStyle_Animated-anim {
0% {
background-color: #FF0000;
}
100% {
}
}
.psc-TestBackgroundStyle_Animated {
animation-name: psc-TestBackgroundStyle_Animated-anim;
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.psc-TestBorderStyle {
border-color: #FFFF00;
}
@keyframes psc-TestBorderStyle_Animated-anim {
0% {
border-color: #FFFF00;
}
100% {
}
}
.psc-TestBorderStyle_Animated {
animation-name: psc-TestBorderStyle_Animated-anim;
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
[
{
"type": "ia.container.flex",
"version": 0,
"props": {
"direction": "column",
"style": {
"classes": "TestBackgroundStyle_Animated TestBorderStyle",
"borderStyle": "solid",
"borderWidth": 10
}
},
"meta": {
"name": "FlexContainer_1"
},
"position": {
"grow": 1,
"shrink": 0,
"basis": "10px"
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Animated Background",
"style": {
"textAlign": "center"
}
},
"meta": {
"name": "Label"
},
"position": {
"grow": 1,
"shrink": 0
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Static Border",
"style": {
"textAlign": "center"
}
},
"meta": {
"name": "Label_0"
},
"position": {
"grow": 1,
"shrink": 0
},
"custom": {}
}
]
},
{
"type": "ia.container.flex",
"version": 0,
"props": {
"direction": "column",
"style": {
"classes": "TestBackgroundStyle TestBorderStyle_Animated",
"borderStyle": "solid",
"borderWidth": 10
}
},
"meta": {
"name": "FlexContainer_2"
},
"position": {
"grow": 1,
"shrink": 0,
"basis": "10px"
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Static Background",
"style": {
"textAlign": "center"
}
},
"meta": {
"name": "Label_0"
},
"position": {
"grow": 1,
"shrink": 0
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Animated Border",
"style": {
"textAlign": "center"
}
},
"meta": {
"name": "Label"
},
"position": {
"grow": 1,
"shrink": 0
},
"custom": {}
}
]
},
{
"type": "ia.container.flex",
"version": 0,
"props": {
"direction": "column",
"style": {
"classes": "TestBackgroundStyle_Animated TestBorderStyle_Animated",
"borderStyle": "solid",
"borderWidth": 10
}
},
"meta": {
"name": "FlexContainer_0"
},
"position": {
"grow": 1,
"shrink": 0,
"basis": "10px"
},
"custom": {},
"children": [
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Animated Background",
"style": {
"textAlign": "center"
}
},
"meta": {
"name": "Label_1"
},
"position": {
"grow": 1,
"shrink": 0
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Animated Border",
"style": {
"textAlign": "center"
}
},
"meta": {
"name": "Label"
},
"position": {
"grow": 1,
"shrink": 0
},
"custom": {}
}
]
}
]
Here is the code for my Style classes as well as the objects I was using to test this (just flex containers in this case). Two objects have one animated and one static style class applied to each where both get applied properly. The third object has both animated style classes and only the latter style class gets applied visually.