How do I get css animations to work in User Macros

Chris Kent
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 5, 2014

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>

4 answers

1 accepted

0 votes
Answer accepted
Chris Kent
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 6, 2014

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>

0 votes
Chris Kent
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 6, 2014

So,

I have done a bit more investigation on this, it is not Confluence, it is my browser.

I see that this keyframe works in both IE and Firefox, but not in Chrome (my browser of choice).

Does anyone know how to implement browser specific actions in Velocity, and also what would I need to do to get this working in Chrome?

0 votes
Chris Kent
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 5, 2014

Oh my, that is awesome, I thought I was going crazy.

I am using Confluence 5.2.5, so my thought is that "animation" attribute is for HTML 5 only and my Confluence version does not support it yet - what are your thoughts?

Thanks

0 votes
jing_hwa_cheok
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 5, 2014

I have tested your user macro code with Confluence 5.4.2 and they seem to work just fine. I can see the button pulsing as you intended.

Which version of Confluence did you test the code with?

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events