myfaces-html5-demo/src/main/webapp/sections/animations.xhtml

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->


<ui:composition template="/sections/sectionTemplate.xhtml"
      xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:hx="http://myfaces.apache.org/html5/html"
      xmlns:fx="http://myfaces.apache.org/html5/core"
      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
      xmlns:common="http://java.sun.com/jsf/composite/components/common">

<ui:define name="title">
    Animations
</ui:define>

<ui:define name="browserSupport">
  <bs:browserSupport webkitSupport="true" />
</ui:define>

<ui:define name="viewChangeLinks">
    <common:viewChange singlePageName="animations" slideId="animations" />
</ui:define>

<ui:define name="sectionContent">
    <h:outputStylesheet>
        div.effectDemoBox{
            border: 1px dashed blue;
            margin-top : 15px;
            width: 100% !important;
            height:200px !important;
        }

        div.effectDemoBoxText{
            text-align:center;
            width:100%;
        }
    </h:outputStylesheet>
    <h:panelGrid columns="2" width="100%">

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Click to shake</div>
            <fx:animations event="click" iteration="3" duration="0.3s" timingFunction="ease-in-out">
                <fx:animationShake rotation="10" />
            </fx:animations>

            <sh:sh><![CDATA[
<hx:div>
<fx:animations event="click" iteration="3"
    duration="0.3s" timingFunction="ease-in-out">
    <fx:animationShake rotation="10" />
</fx:animations>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Click to pulse</div>
            <fx:animations event="click" iteration="3" duration="0.3s" timingFunction="ease-in-out">
                <fx:animationPulse maxOpacity="1" minOpacity="0.2"/>
            </fx:animations>

            <sh:sh><![CDATA[
<hx:div>
<fx:animations event="click" iteration="3"
    duration="0.3s" timingFunction="ease-in-out">
    <fx:animationPulse maxOpacity="1" minOpacity="0.2"/>
</fx:animations>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Click to scale</div>
            <fx:animations event="click" iteration="3" duration="0.3s" timingFunction="ease-in-out">
                <fx:animationScale maxSize="1" minSize="0.5" />
            </fx:animations>

            <sh:sh><![CDATA[
<hx:div>
<fx:animations event="click" iteration="3"
    duration="0.3s" timingFunction="ease-in-out">
    <fx:animationScale maxSize="1" minSize="0.2" />
</fx:animations>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <h:panelGroup>
            <h:outputStylesheet id="customKeyFrame">
                .customKeyFrameAnimation{
                    position: absolute;
                    width : 200px !important;
                    box-shadow: 5px 44px 28px #333;
                    box-reflect: below 1px -webkit-gradient
                       (linear, 0% 0%, 0% 74%, from(transparent), to(rgba(255, 255, 255, 0.25)))
                       0 0 0 0 stretch stretch;
                    opacity : 1.0;
                }
                @-webkit-keyframes customKeyFrame {
                    0% {
                        width : 200px !important;
                        left : 10%;
                        top : 10%;
                        -webkit-transform : skewX(0deg);
                        background-color : yellow;
                    }
                    10% {
                        left : 10%;
                        top : 10%;
                        background-color : none;
                    }
                    20% {
                        left : 70%;
                        top : 70%;
                    }
                    30% {
                        left : 70%;
                        top : 70%;
                    }
                    40% {
                        left : 40%;
                        top : 40%;
                        -webkit-transform : skewX(-20deg);
                    }
                    50% {
                        left : 40%;
                        top : 40%;
                        -webkit-transform : skewX(0deg);
                    }
                    60% {
                        left : 70%;
                        top : 50%;
                    }
                    70% {
                        left : 70%;
                        top : 50%;
                    }
                    80% {
                        left : 10%;
                        top : 20%;
                    }
                    90% {
                        left : 10%;
                        top : 20%;
                    }
                    100% {
                        width : 200px !important;
                        left : 10%;
                        top : 20%;
                        background-color : none;
                        -webkit-transform : skewX(0deg);
                    }
                }
            </h:outputStylesheet>
            <hx:div styleClass="effectDemoBox" style="" onclick="this.className='effectDemoBox';">
                <div class="effectDemoBoxText">Double click to run animation with custom</div>
                <div class="effectDemoBoxText">keyframe. Click to stop</div>
                <fx:animation id="customKeyFrameAnimation" event="dblclick" iteration="30" duration="6s" timingFunction="linear" direction="alternate" keyFrame="customKeyFrame"/>

                <sh:sh lang="css"><![CDATA[
@-webkit-keyframes customKeyFrame {
     0% { left : 10%; top : 10%; }
    10% { left : 70%; top : 70%; }
    ....
}
                ]]></sh:sh>
                <sh:sh lang="css"><![CDATA[
<fx:animation keyFrame="customKeyFrame" event="dblclick"
  iteration="30" duration="6s" direction="alternate"/>
                ]]></sh:sh>
            </hx:div>
        </h:panelGroup>

    </h:panelGrid>
</ui:define>
</ui:composition>