Cannot display multiple CSS animations in one page

Hi guys,

I’ve recently been testing CSS animations on blank pages on my Enfold site by placing my class name in the ‘For Developers: Section ID’ of a colour section. On my current page I’m trying to place two colour sections named ball and ballSquare.

In my CSS I currently have:

#ball {
	position: absolute;
	top: 50%;
	left: calc(50% - 200px);
	width: 100px;
	height: 100px;
	transform: translate(-100%,-100%);
	background: #009640;
	border-radius: 100%;
	animation: move-with-mb 2s infinite ease-in-out;
}

@keyframes move-with-mb {
	0%, 100% { transform: translate(-50%,-50%) scaleX(.9); }
	25% {
		transform: translate(-50%,-50%) scaleX(1.2);
		box-shadow: -10px 0 5px rgba(86,15,100,3,0.2),
								-20px 0 2px rgba(86,15,100,3,0.1);
	}
	50% {
		transform: translate(-50%,-50%) scaleX(.9);
		left: calc(50% + 200px);
	}
	75% {
		transform: translate(-50%,-50%) scaleX(1.2);
		box-shadow: 10px 0 5px rgba(41,128,185,0.2),
								20px 0 2px rgba(86,15,100,3,0.1);
	}
}

and

#ballSquare {
	position: absolute;
	top: 50%;
	left: calc(50% - 200px);
	width: 100px;
	height: 100px;
	transform: translate(-100%,-100%);
	background: #009640;
	border-radius: 10%;
	animation: move-with-mb 2s infinite ease-in-out;
}

@keyframes move-with-mb {
	0%, 100% { transform: translate(-50%,-50%) scaleX(.9); }
	25% {
		transform: translate(-50%,-50%) scaleX(1.2);
		box-shadow: -10px 0 5px rgba(86,15,100,3,0.2),
								-20px 0 2px rgba(86,15,100,3,0.1);
	}
	50% {
		transform: translate(-50%,-50%) scaleX(.9);
		left: calc(50% + 200px);
	}
	75% {
		transform: translate(-50%,-50%) scaleX(1.2);
		box-shadow: 10px 0 5px rgba(41,128,185,0.2),
								20px 0 2px rgba(86,15,100,3,0.1);
	}
}

Unfortunately only #ball seems to appear on the web page itself (URL in Private content section).

Strangely, allowing sidebars on this page also causes no CSS animations whatsoever to appear.

Does Enfold purposefully have a limit of 1 CSS animations per page?

• This topic was modified 8 years, 7 months ago by AboveDigital.