.element-animation{
animation: animationFrames ease 3s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 3s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease 3s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: animationFrames ease 3s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: animationFrames ease 3s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
}
@keyframes animationFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(3600deg) ;
}
}
@-moz-keyframes animationFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(3600deg) ;
}
}
@-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(3600deg) ;
}
}
@-o-keyframes animationFrames {
0% {
-o-transform: rotate(0deg) ;
}
100% {
-o-transform: rotate(3600deg) ;
}
}
@-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(0deg) ;
}
100% {
-ms-transform: rotate(3600deg) ;
}
}<style type="text/css">
.gradientEllipsis {
position: relative;
white-space: nowrap;
overflow-x: hidden;
}
.gradientEllipsis:after {
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50px;
background: linear-gradient(left center, rgba(255, 255, 255, 0), #FFFFFF);
content: "";
}
</style>
<div class="gradientEllipsis" style="width: 150px">
Foo, bar, and lorem ipsum.
</div>.type li.active {
box-shadow: 0 0 0 2px #fdb913 inset;