LarryMatte

<dependency>
    <groupId>com.arcbees.gss</groupId>
    <artifactId>gsss</artifactId>
    <version>1.0</version>
    <scope>provided</scope>
</dependency>

LarryMatte

<inherits name="com.arcbees.gsss.animation.Animation"/>

LarryMatte

package com.projectname.project.client.resources;

import com.arcbees.gsss.animation.client.AnimationResources;
import com.google.gwt.resources.client.ClientBundle;

public interface AnimationsResources extends ClientBundle {

    interface Style extends AnimationResources.Animation {
    }

LarryMatte

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:with field=“anim” type="com.projectname.project.client.resources.AnimationsResources"/>

    <g:HTMLPanel>
       
    </g:HTMLPanel>
</ui:UiBinder>

LarryMatte

<g:HTMLPanel>

    <div class="{anim.style.myAnimation}">
    </div>
   
</g:HTMLPanel>

LarryMatte

.myAnimation {
   background-color: red;

   width: 50px;
   height: 50px;
}

LarryMatte

package com.projectname.project.client.resources;

import com.arcbees.gsss.animation.client.AnimationResources;
import com.google.gwt.resources.client.ClientBundle;

public interface AnimationsResources extends ClientBundle {

   interface Style extends AnimationResources.Animation {
       String myAnimation();
   }

LarryMatte

<g:HTMLPanel>

    <div class="{anim.style.myAnimation} {anim.style.animation}">
    </div>
   
</g:HTMLPanel>

LarryMatte

<g:HTMLPanel>

    <div class="{anim.style.myAnimation} {anim.style.animation} {anim.style.pulse}">
    </div>
   
</g:HTMLPanel>

LarryMatte

@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }