一、CSS
@charset "UTF-8";
div{
margin: 10px;
padding: 10px;
width: 160px;
height: 80px;
background: chartreuse ;
}
@keyframes my {
from {
margin-left:50px ;
background-color: green;
}
to{
margin-left:300px ;
background-color: blue;
}
}
@keyframes you {
0% {
margin-left:50px ;
background-color: yellow;
}
100%{
margin-left:300px ;
background-color: blue;
}
}
#div5{
animation-name:my ;
animation-duration: 3s;/*动画持续时间*/
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: 2;/*infinite不限次数*/
animation-fill-mode: forwards;/*动画完成时停留在最后一帧,backwards在第一帧时应用,延时时停留在第一帧处,both是两种都应用*/
}
#div6{
animation-name:you ;
animation-duration: 3s;/*动画持续时间*/
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: 2;/*infinite不限次数*/
animation-direction:alternate ;/*轮流反向播放,默认值是normal*/
animation-play-state: running;/*结合js使用可以定义动画暂停或者播放*/
animation-fill-mode: both;
/* 复合属性语法animation: name duration timing-function delay iteration-count direction;*/
}
二、效果展示