choice-element.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer-ajax/polymer-ajax.html">

<polymer-element name="choice-element" attributes="text" noscript>
<template>
	<style>
	  	.circle {	
	-webkit-animation: backgroundcolors 0.5s infinite;
	-moz-animation: backgroundcolors 0.5s infinite;
	animation: backgroundcolors 0.5s infinite;
}

@keyframes backgroundcolors {
    0% {
        background: red;
    }
    11% {
        background: orange;
    }
    22% {
        background: yellow;
    }
    33% {
        background: #7AEDF5;
    }
    44% {
        background: blue;
    }
    55% {
        background: purple;
    }
    66% {
        background: blue;
    }
    77% {
        background: #7AEDF5;
    }
    88% {
        background: yellow;
    }
    100% {
        background: orange;
    }
}

@-webkit-keyframes backgroundcolors {
    0% {
        background: red;
    }
    11% {
        background: orange;
    }
    22% {
        background: yellow;
    }
    33% {
        background: #7AEDF5;
    }
    44% {
        background: blue;
    }
    55% {
        background: purple;
    }
    66% {
        background: blue;
    }
    77% {
        background: #7AEDF5;
    }
    88% {
        background: yellow;
    }
    100% {
        background: orange;
    }
}
	 
	</style>
    <span class="circle">{{ text }}</span>
</template>
</polymer-element>