[分享]css3动画平移效果

CSS3动画平移效果是一种常用的页面交互设计效果，能够为网站的用户体验增添不少乐趣和互动性。在CSS3中，通过使用transition或者animation属性可以轻松地实现平移效果。/ transi...

CSS3动画平移效果是一种常用的页面交互设计效果，能够为网站的用户体验增添不少乐趣和互动性。在CSS3中，通过使用transition或者animation属性可以轻松地实现平移效果。

/* transition实现平移效果 */
.box{
  transition: transform 0.3s ease-out;
}
.box:hover{
  transform: translateX(50px);
}

/* animation实现平移效果 */
.box{
  animation: slide 0.3s ease-out;
}
@keyframes slide{
  from{ transform: translateX(0); }
  to{ transform: translateX(50px); }
} 

上面的代码分别演示了使用transition和animation两种方式实现平移效果的实现。其中，transition是通过定义元素的鼠标悬浮状态下的transform属性值，使元素发生平移动画，实现效果较为简单。而animation需要定义keyframes，通过控制动画执行时刻的属性值来实现平移效果，可以实现更为复杂的动画效果。

除了上述两种方法外，还有通过CSS3的transform属性直接定义平移效果的方法，如下：

.box{
  transform: translateX(50px);
} 

这种方式可以快速地实现平移效果，但是无法控制动画效果。因此，在实际开发中，根据需要选择适合的方式实现平移效果。