Animasyon Kutusu

Animasyon Kutusu

Posted by: pcextra Eylül 01, 2012    Comments

<style type="text/css">  #animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1; border-radius:5px; -webkit-border-radius:5px;  }  @keyframes animated_div { 0%		{transform: rotate(0deg);left:0px;} 25%		{transform: rotate(20deg);left:0px;} 50%		{transform: rotate(0deg);left:500px;} 55%		{transform: rotate(0deg);left:500px;} 70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;} 100%	{transform: rotate(-360deg);left:0px;} }  @-webkit-keyframes animated_div { 0%		{-webkit-transform: rotate(0deg);left:0px;} 25%		{-webkit-transform: rotate(20deg);left:0px;} 50%		{-webkit-transform: rotate(0deg);left:500px;} 55%		{-webkit-transform: rotate(0deg);left:500px;} 70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100%	{-webkit-transform: rotate(-360deg);left:0px;} }  @-moz-keyframes animated_div { 0%   {-moz-transform: rotate(0deg);left:0px;} 25%  {-moz-transform: rotate(20deg);left:0px;} 50%  {-moz-transform: rotate(0deg);left:500px;} 55%  {-moz-transform: rotate(0deg);left:500px;} 70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-moz-transform: rotate(-360deg);left:0px;} }  @-o-keyframes animated_div { 0%   {transform: rotate(0deg);left:0px;} 25%  {transform: rotate(20deg);left:0px;} 50%  {transform: rotate(0deg);left:500px;} 55%  {transform: rotate(0deg);left:500px;} 70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} } </style> <div id="animated_div">CSS3<br /> <span style="font-size:10px;">Animation</span></div>