How do I get css animations to work in User Macros

Chris Kent

So I have a Macro that generates a button with a Link, but I really need this button to pulse. I have seen the code working, but I can't get it working in a Confluence User Macro.

How can I achieve this?

Using CSS styles, this is done with the animation attribute and using keyframes, but I cannot get this to work

Here is the code

## Macro name: My Button
## Macro has a body: N
## Body format: HTML
## Output: HTML
##
## Developed by: Chris Kent
## Date created: 05/03/2014
##
## @param Name:title=Name|type=string|desc=Text to put on button|required=true
## @param Page:title=Page Link|type=confluence-content|desc=Confluence page to launch|required=true

## lets gets the Space key and Page title from the paramPage
#foreach ($element in $paramPage.split(":"))
	#if($velocityCount == 1)
		#set($mySpace = $element)
	#else
		#set($myPage = $element)
	#end
#end

## find the page
#set($page = $pageManager.getPage($mySpace, $myPage))

<div>
<style>
@keyframes boxshad {
  0% {box-shadow: 0 0 10px #2b4170; }
  50% {box-shadow: 0 0 20px #2b4170;}
  100% {box-shadow: 0 0 10px #2b4170; }
}
</style>

<a href="$page.getUrlPath()">
<button style="
	width: 200px;
	text-align: center;
	color:#FFF;
	text-decoration:none;
	padding: 10px 0;
	border-radius: 5px;
	text-shadow: 0 -1px -1px #1f2f52;
	background-color: #2b4170;
	background:-moz-linear-gradient(top, #3b5998, #2b4170);
	background:-ms-linear-gradient(top, #3b5998, #2b4170);
	background:-webkit-linear-gradient(top, #3b5998, #2b4170);
	border: 1px solid #2b4170;
	cursor: pointer;
	animation: boxshad 1s infinite;">
$paramName
</button>
</a>

Chris Kent

OK, All sorted, need to use -webkit- prefix...

So the fianl code looks like:

<div>
<style>
@keyframes boxshad {
  0% {box-shadow: 0 0 10px #2b4170; }
  50% {box-shadow: 0 0 20px #2b4170;}
  100% {box-shadow: 0 0 10px #2b4170; }
}
@-webkit-keyframes boxshad {
  0% {box-shadow: 0 0 10px #2b4170; }
  50% {box-shadow: 0 0 20px #2b4170;}
  100% {box-shadow: 0 0 10px #2b4170; }
}
</style>

<a href="$page.getUrlPath()">
<button style="
	width: 200px;
	margin-left: 20px;
	margin-top: 20px;
	text-align: center;
	color:#FFF;
	text-decoration:none;
	padding: 10px 0;
	border-radius: 5px;
	text-shadow: 0 -1px -1px #1f2f52;
	background-color: #2b4170;
	background:-moz-linear-gradient(top, #3b5998, #2b4170);
	background:-ms-linear-gradient(top, #3b5998, #2b4170);
	background:-webkit-linear-gradient(top, #3b5998, #2b4170);
	border: 1px solid #2b4170;
	cursor: pointer;
	animation: boxshad 1s infinite;
	-webkit-animation: boxshad 1s infinite;">
$paramName
</button>
</a>