動畫
animation
A.@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
B.@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s;
}
div{
animation:myfirst 2s infinite; //無限循環(huán)
}
示例
div{
width:900px;
height: 900px;
background-color: aquamarine;
position: relative;
}
@keyframes myfirst{
0%{
background-color: blueviolet;
}
30%{
background-color: aqua;
}
70%{
background-color: bisque;
}
100%{
background-color: chartreuse;
}
}
/* div{
animation: myfirst 5s;
}*/
div{
animation: myfirst 2s infinite;
}
div:hover{
animation: none;
}