A Pen by ameyraut.

css3animation.markdown

css3animation

CSS 3 Text Animation.

http://ameyraut.com/expt1/

A Pen by ameyraut on CodePen.

License.

index.html

 
	 
	
	 <div class="foo"> merry </div>
	 <div class="foo">christmas</div> 
  
  <br />
  <br />
  <br />
<div><a href="http://www.ameyraut.com"  target="_blank" >www.ameyraut.com</a></div> 

script.js

$("document").ready(function(){
		var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined;
		
		function linkify(selector,char_crossfade) { 
			
			var cc = (char_crossfade!=null)?char_crossfade:"150"; 
			var ad=0;
			
			if (supports3DTransforms) {  
				$.each(selector, function() { 
					var nodes = $(this);
					var char_count=$.trim( nodes.text()).length;
					var char_at=$.trim( nodes.text()); 
					nodes.empty();
					for(var i=0;i<char_count;i++ ){ 
						var node = char_at[i];
						if (node!=" "){
							nodes.append('<span  class="letter"  data-letter="' + node + '">' + 
							'<span class="char2" style="-webkit-animation-delay:' + ((i*cc)+ad) + 
							'ms;-moz-animation-delay:' + ((i*cc)+ad) + 'ms;'+
							'ms;-ms-animation-delay:' + ((i*cc)+ad) + 'ms;'+
							'ms;-o-animation-delay:' + ((i*cc)+ad) + 'ms;'+
							'ms;animation-delay:' + ((i*cc)+ad) + 'ms;" >'+
							node+'</span>'+ 
							node +  
							'<span class="char1" style="-webkit-animation-delay:' + ((i*cc)+ad) + 
							'ms;-moz-animation-delay:' + ((i*cc)+ad) + 'ms;'+
							'ms;-ms-animation-delay:' + ((i*cc)+ad) + 'ms;'+
							'ms;-o-animation-delay:' + ((i*cc)+ad) + 'ms;'+
							'ms;animation-delay:' + ((i*cc)+ad) + 'ms;" >'+
							node+'</span>'+ 
							'</span>'); 
						}else{
							nodes.append('<span class="letter"> &nbsp </span>');
						} 
					}
					ad+=(char_count*char_crossfade);
				});  
			}else{
				selector.addClass("letter");
			}
		} 
		
		//Add class name here followed by crossfade charactor animation delay in millisecond
		linkify($(".foo"),200);  
	}); 

style.css

*, *:before, *:after {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	overflow-y: auto;
	text-align: center;
	background: #409CC7;
	padding: 0;
	position: relative;
  padding-top: 100px;
}
.foo {
	position: relative;
	display: block;
}
.letter {
	display: inline-block;
	font-weight: 900;
	font-size: 9em;
	position: relative;
	color: #FFF;
	/*transform-style*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/*perspective*/
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
	z-index: 1;
	text-shadow: 1px 2px 1px #67BCD1, -1px -1px 1px #447EA5;
	text-transform: uppercase;
	margin-bottom: 1em;
}
.letter .char1, .letter .char2 {
	position: absolute;
	/*transform-origin*/
	-webkit-transform-origin: 0 230%;
	-moz-transform-origin: 0 230%;
	-ms-transform-origin: 0 230%;
	-o-transform-origin: 0 230%;
	transform-origin: 0 230%;
	top: 0;
	left: 0;
	text-shadow: none;
}
.letter .char1 {
	color: #409CC7;
	/*transform*/
	-webkit-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-moz-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-ms-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-o-transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	transform: scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	/*animation-name*/
	-webkit-animation-name: cover-ani;
	-moz-animation-name: cover-ani;
	-ms-animation-name: cover-ani;
	-o-animation-name: cover-ani;
	animation-name: cover-ani;
	/*animation-duration*/
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	/*animation-timing-function*/
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	/*animation-iteration-count*/
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	z-index: 3;
}
.letter .char2 {
	color: rgba(0,0,0,0.15);
	z-index: 2;
	/*transform*/
	-webkit-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	-moz-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	-ms-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	-o-transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	transform: scale(1,1) rotateX(-50deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	/*animation-name*/
	-webkit-animation-name: shadow-ani;
	-moz-animation-name: shadow-ani;
	-ms-animation-name: shadow-ani;
	-o-animation-name: shadow-ani;
	animation-name: shadow-ani;
	/*animation-duration*/
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	/*animation-timing-function*/
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	/*animation-iteration-count*/
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	opacity: 0;
}


@-webkit-keyframes cover-ani {
 	0% {
		-webkit-transform:scale(1,1) rotateX(0deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg);
	}
	
	25%{
		color: #69C2EC;
	}
	
	50%{
		-webkit-transform:scale(1,1) rotateX(-50deg)rotateY(0deg)rotateZ(0deg) skew(8deg,0deg);
		color:#2A7BA2 ;
	}
	
	75%{
		color: #409CC7;
		opacity:1;
	}
	100% {
		-webkit-transform:scale(1,1) rotateX(-180deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg); 
		opacity: 0;
	}
}
@-moz-keyframes cover-ani {
  	0% {
		-moz-transform:scale(1,1) rotateX(0deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg);
	}
	
	25%{
		color: #69C2EC;
	}
	
	50%{
		-moz-transform:scale(1,1) rotateX(-50deg)rotateY(0deg)rotateZ(0deg) skew(8deg,0deg);
		color:#2A7BA2 ;
	}
	
	75%{
		color: #409CC7;
		opacity:1;
	}
	100% {
		-moz-transform:scale(1,1) rotateX(-180deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg);
		opacity: 0; 
	}
}
@-o-keyframes cover-ani {
  0% {
		-o-transform:scale(1,1) rotateX(0deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg);
	}
	
	25%{
		color: #69C2EC;
	}
	
	50%{
		-o-transform:scale(1,1) rotateX(-50deg)rotateY(0deg)rotateZ(0deg) skew(8deg,0deg);
		color:#2A7BA2 ;
	}
	
	75%{
		color: #409CC7;
		opacity:1;
	}
	100% {
		-o-transform:scale(1,1) rotateX(-180deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg); 
		opacity: 0;
	}
}
@-ms-keyframes cover-ani {
  0% {
		-ms-transform:scale(1,1) rotateX(0deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg);
	}
	
	25%{
		color: #69C2EC;
	}
	
	50%{
		-ms-transform:scale(1,1) rotateX(-50deg)rotateY(0deg)rotateZ(0deg) skew(8deg,0deg);
		color:#2A7BA2 ;
	}
	
	75%{
		color: #409CC7;
		opacity:1;
	}
	100% {
		-ms-transform:scale(1,1) rotateX(-180deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg); 
		opacity: 0;
	}
}
@keyframes cover-ani {
   0% {
		transform:scale(1,1) rotateX(0deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg);
	}
	
	25%{
		color: #69C2EC;
	}
	
	50%{
		transform:scale(1,1) rotateX(-50deg)rotateY(0deg)rotateZ(0deg) skew(8deg,0deg);
		color:#2A7BA2 ;
	}
	
	75%{
		color: #409CC7;
		opacity:1;
	}
	100% {
		transform:scale(1,1) rotateX(-180deg)rotateY(0deg)rotateZ(0deg) skew(0deg,0deg); 
		opacity: 0;
	}
}



 @-webkit-keyframes shadow-ani {
  0% {
		-webkit-transform: scale(1,1)rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	}
	
	50%{
		-webkit-transform: scale(1.08,1)rotateX(-80deg) rotateY(0deg) rotateZ(0deg) skew(-30deg,0deg);
		opacity: 1;
	}
	
	100% {
		-webkit-transform: scale(1,1)rotateX(-180deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
		opacity: 0;
	}
}
@-moz-keyframes shadow-ani {
  0% {
		-moz-transform: scale(1,1)rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	}
	
	50%{
		-moz-transform: scale(1.08,1)rotateX(-80deg) rotateY(0deg) rotateZ(0deg) skew(-30deg,0deg);
		opacity: 1;
	}
	
	100% {
		-moz-transform: scale(1,1)rotateX(-180deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
		opacity: 0;
	}
}
@-o-keyframes shadow-ani {
  0% {
		-o-transform: scale(1,1)rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	}
	
	50%{
		-o-transform: scale(1.08,1)rotateX(-80deg) rotateY(0deg) rotateZ(0deg) skew(-30deg,0deg);
		opacity: 1;
	}
	
	100% {
		-o-transform: scale(1,1)rotateX(-180deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
		opacity: 0;
	}
}
@-ms-keyframes shadow-ani {
  0% {
		-ms-transform: scale(1,1)rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	}
	
	50%{
		-ms-transform: scale(1.08,1)rotateX(-80deg) rotateY(0deg) rotateZ(0deg) skew(-30deg,0deg);
		opacity: 1;
	}
	
	100% {
		-ms-transform: scale(1,1)rotateX(-180deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
		opacity: 0;
	}
}  
 
@keyframes shadow-ani{
	0% {
		transform: scale(1,1)rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
	}
	
	50%{
		transform: scale(1.08,1)rotateX(-80deg) rotateY(0deg) rotateZ(0deg) skew(-30deg,0deg);
		opacity: 1;
	}
	
	100% {
		transform: scale(1,1)rotateX(-180deg) rotateY(0deg) rotateZ(0deg) skew(0deg,0deg);
		opacity: 0;
	}
}