how to create an animation with css

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>

Posted by: Guest on April-13-2020

/* ======================== Animation ======================== animation-name: We have to create our animation "example" etc. animation-duration: 4s; animation-delay: 1s; animation-iteration-count: 4; animation-direction: normal/reverse/alternate/alternate-reverse; animation-timing-function: ease/ease-in/ease-out/ease-in-out; animation-fill-mode: forwards/backward; */ @keyframes example { from { color: #a8dadcff; } to { color: #e63946ff; } } .animation { animation-name: "example"; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; /* animation-direction: reverse; */ }

Answers for "how to create an animation with css"

Code answers related to "how to create an animation with css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us