animation属性 | 码农工具

xxxxxxxxxx
 
div{
  width: 100px;
  height: 30px;
  background: red;
  border-radius: 20px;
}
​
@keyframes mymove1
{
  from {left:0px;}
  to {left:500px;}
}
​
@keyframes mymove2
{
  0%   {left:0px;}
  25%  {left:200px;}
  50%  {left:500px;}
  75%  {left:200px;}
  100% {left:0px;}
}
​
@keyframes mymove3
{
  from {left:0px;}
  to {left:500px;}
}
​
@keyframes mymove4
{
  0%   {background:red; left:0px; top:0px; width:100px;}
  25%  {background:yellow; left:200px; top:0px; width:200px;}
  50%  {background:brown; left:200px; top:200px; width:200px;}
  75%  {background:green; left:0px; top:200px; width:100px;}
  100% {background:red; left:0px; top:0px; width:100px;}
}
​
.animation1 {
  position:relative;
  animation: mymove1 5s infinite;
}
​
.animation2 {
  position:relative;
  animation: mymove2 5s infinite;
}
​
.animation3 {
  position:relative;
  animation: mymove3 5s ease-in infinite;
}
​
.animation4 {
  position:relative;
  animation: mymove4 5s infinite alternate;
}
CSS