myfaces-html5-demo/src/main/webapp/resources/style/animation.css

/*
 * 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.
 */

@CHARSET "ISO-8859-1";

	@-webkit-keyframes pulse {
	  0%   {opacity: 1.0;}
	  50%  {opacity: 0.6;}
	  100% {opacity: 1.0;}
	}
	
	.pulse {
	  -webkit-animation-name: pulse;
	  -webkit-animation-duration: 1s;
	  -webkit-animation-iteration-count: 1;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	}
	
	@-webkit-keyframes flash {
	  0%   {opacity: 1.0;}
	  50%  {opacity: 0.2;}
	  100% {opacity: 1.0;}
	}
	
	.flash {
	  -webkit-animation-name: flash;
	  -webkit-animation-duration: 0.4s;
	  -webkit-animation-iteration-count: 5;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	}
	    
	@-webkit-keyframes shake {
	    0%   { -webkit-transform: rotate(0deg)}
	    25%  { -webkit-transform: rotate(30deg)}
	    75%  { -webkit-transform: rotate(-30deg)}
	    100% { -webkit-transform: rotate(0deg)}
	}
	
	.shake {
	  -webkit-animation-name: shake;
	  -webkit-animation-duration: 1s;
	  -webkit-animation-iteration-count: 1;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	}
	
	 @-webkit-keyframes fade{
	   0%   { -webkit-transform: scale(1) rotate(5deg); }
	  50%  { -webkit-transform: scale(0.5) rotate(-15deg);  }
	  100% { -webkit-transform: scale(0) rotate(5deg); }
	}
	
	.fade {
	  -webkit-animation-name: fade;
	  -webkit-animation-duration: 1s;
	  -webkit-animation-iteration-count: 1;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	}
	
	@-webkit-keyframes fall{
	   from {top: 10px;}
	   to {top: 470px;}
	}
	
	.fall {
	  -webkit-animation-name: fall;
	  -webkit-animation-duration: 1s;
	  -webkit-animation-iteration-count: 5;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	}
	
	@-webkit-keyframes appear {
      0%   {opacity: 0.0;}
      50%  {opacity: 0.5;}
      100% {opacity: 1.0;}
    }
    
    .appear {
      -webkit-animation-name: appear;
      -webkit-animation-duration: 1.0s;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-direction: alternate;
    }
    
    .hidden
    {
        opacity: 0.0;
    }
    
    .visible
    {
        opacity: 1.0;
    }