CSS animation properties code example

Example 1: css keyframes animation

//css keyframes
#image{
	  width: 100px;
	  height: 100px;
	  background-color: red;
	  position: relative;
	  animation: monFrame 5s linear 2s infinite alternate;

	}
	@keyframes monFrame {
	  0%   {left:0px; top:0px;}
	  25%  {left:500px; top:0px;}
	  50%  {left:500px; top:500px;}
	  75%  {left:0px; top:500px;}
	  100% {left:0px; top:0px;}
     }

Example 2: css keyframes

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Example 3: css animation

<style>
.my-element {
  width: 100%;
  height: 100%;
  animation: tween-color 5s infinite;
}

@keyframes tween-color {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

html,
body {
  height: 100%;
}
<style>

<body>
	<div class="my-element"></div>
</body>

Example 4: animation shorthand css

animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;

Example 5: animation css

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div><p>you can add text in this box or anithing else like a pictrue</p></div>

</body>
</html>

Example 6: css animation shorthand

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

Tags:

Css Example

Recent Posts