[分享]css3执行完成后不返回

CSS3中有一些动画效果，如transition和animation，它们可以让页面元素有更加生动的感觉。但是有时候我们会遇到一个问题，就是当动画执行完成后元素会返回到初始状态，而不是保持在最终状态。...

CSS3中有一些动画效果，如transition和animation，它们可以让页面元素有更加生动的感觉。但是有时候我们会遇到一个问题，就是当动画执行完成后元素会返回到初始状态，而不是保持在最终状态。这种行为多数情况下是由于缺少必要的CSS属性所致。

/* 定义一个transition效果 */
.box{
  transition: all 1s ease;
}

/* 当触发事件时改变元素的属性 */
.box:hover{
  background-color: red;
} 

上面的代码定义了一个hover效果，当鼠标移动到box元素上时，它的背景色会变为红色。但是当鼠标移走时，它会立即返回到原来的颜色，而不是平缓地过渡回去。这是因为我们只定义了hover状态下的transition效果，而没有定义默认状态下的效果，当hover状态结束时，元素便会回到默认状态。

为了解决这个问题，我们需要在默认状态下也定义一个transition效果：

.box{
  transition: all 1s ease;
  background-color: yellow; /* 定义默认颜色 */
} 

这次我们在.box选择器中加入了background-color属性，并定义了一个默认的颜色，这样在hover状态结束时，元素便会缓慢地过渡回到黄色。

同理，在animation中也需要定义动画完成后元素的最终状态，否则会出现与transition类似的问题。

/* 定义一个animation效果 */
.box{
  animation: move 1s ease infinite;
}

/* 定义动画的关键帧 */
@keyframes move{
  0%{transform: translateX(0);}
  50%{transform: translateX(100px);}
  100%{transform: translateX(0);}
}

/* 当动画执行完成后元素会立即返回原位置 */ 

上面的代码定义了一个平移的动画效果，让元素在水平方向上来回移动。但是动画完成后，元素会立即返回到原来的位置，这并不是我们期望的结果。要解决这个问题，我们需要在100%关键帧中加入一条transform属性，将元素平移到最终位置：

@keyframes move{
  0%{transform: translateX(0);}
  50%{transform: translateX(100px);}
  100%{transform: translateX(0);}
  transform: translateX(100px); /* 定义最终状态 */
} 

这样就能让元素停留在最终状态了。