动画 开始 -- 》 停止
作者：chrispy
.box{width:200px;height:200px;background:#ccc}.box{-webkit-animation-name: fadeIn; /*动画名称*/-webkit-animation-duration: 1s; /*动画持续时间*/-webkit-animation-iteration-count: 1; /*动画次数*/-webkit-animation-delay: 0s; /*延迟时间*/animation-fill-mode: for
.box{width:200px;height:200px;background:#ccc}
.box
{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 1s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
animation-fill-mode: forwards;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0.6; /*初始状态 透明度为0*/
}
50% {
opacity: 0.6; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
background:#21AAE0;
}
}