css-anim1.css

.t{color : Blue;}			
	p{	-webkit-animation: my 10s infinite; /* Chrome, Opera, and Safari */
		animation: my 10s infinite; /* Standard syntax */
		background-color:red;
	  }
 
		@-webkit-keyframes my				/* Chrome, Opera, and Safari */
		{
		0% {background-color: red;}
		50% {background-color: yellow;}
		100% {background-color: red;}
		}
 
		@keyframes my						/* Standard syntax */
		{
		0% {background-color: red;}
		50% {background-color: yellow;}
		100% {background-color: red;}
		}      
 
	H1{background-color:pink;}
 
	html,body{
		-webkit-animation: mymove 20s infinite; /* Chrome, Opera, and Safari */
		animation: mymove 20s infinite; /* Standard syntax */
		background-color: black;
		}
 
		@-webkit-keyframes mymove 				/* Chrome, Opera, and Safari */
		{
		0% {background-color: black;}
		50% {background-color: yellow;}
		100% {background-color: black;}
		}
 
		@keyframes mymove						/* Standard syntax */
		{
		0% {background-color: black;}
		50% {background-color: yellow;}
		100% {background-color: black;}
		}       
		 .circle {                    /* for div shape circle class */ 
			width: 50px;
			height: 50px;
			-webkit-border-radius: 25px;
			-moz-border-radius: 25px;
			border-radius: 25px;
			background: red;
				}
			#anim{                        /* for left to right motion */
				width: 50px;
				height: 50px;
				background-color: red;
				position: relative;
				-webkit-animation: example 7s infinite; /* Chrome, Safari, Opera */
														/* Chrome, Safari, Opera */
				animation: example 7s infinite;
				}

														/* Chrome, Safari, Opera */
			@-webkit-keyframes example {
				0%   {background-color:red; left:0px; top:0px;}
				25%  {background-color:yellow; }
				50%  {background-color:blue; }
				75%  {background-color:green; }
				100% {background-color:red; left:92%; top:0px;}
			}

														/* Standard syntax */
			@keyframes example {
				0%   {background-color:red; left:0px; top:0px;}
				25%  {background-color:yellow; }
				50%  {background-color:blue; }
				75%  {background-color:green; }
				100% {background-color:red; left:92%; top:0px;}
				}
			
			p #g {                          /* for device view-width size */
						width: 100%;
						height: 100%;
						position: relative;
				}
									

			.blink_text 											/* for blink operation. */
				{
						animation:2s blinker linear infinite;
						-webkit-animation:2s blinker linear infinite;
						-moz-animation:2s blinker linear infinite;

						color: white;
				}

			@-moz-keyframes blinker
				{  
						0% { opacity: 1.0; }
						50% { opacity: 0.0; }
						100% { opacity: 1.0; }
				}

			@-webkit-keyframes blinker
				{  
						0% { opacity: 1.0; }
						50% { opacity: 0.0; }
						100% { opacity: 1.0; }
				}

			@keyframes blinker {  
						0% { opacity: 1.0; }
						50% { opacity: 0.0; }
						100% { opacity: 1.0; }
				}