主页 / 问题 / 686634
Accepted
Abmin
Asked:2020-07-03 19:44:48 +0000 UTC2020-07-03 19:44:48 +0000 UTC

如何去除 CSS 中的平滑度？

  • 772

我想让猪顺利地从左到右跑，反之亦然，但是转身时，有一个流畅的动画，猪变得很瘦。在过渡中，我写到只有左边是平滑的。或者也许js有解决方案？

.pig {
    background: url(http://i.imgur.com/VEJ5nms.gif) no-repeat;
    height: 42px;
    width: 59px;
    position: absolute;
    top: 50px;
	transition: left 2.4s;
	animation: pig 4.8s infinite;
}
@keyframes pig {
    0% {
      left: 20px;
	  transform: scale(1, 1)
    }
	50% {
      left: 300px;
	  transform: scale(-1, 1)
    }
	100% {
      left: 20px;
    }
}
<div class="pig"></div>

css

3 个回答

  1. 只需添加一个展开的框架即可。

    .pig {
    background: url(http://i.imgur.com/VEJ5nms.gif) no-repeat;
    height: 42px;
    width: 59px;
    position: absolute;
    top: 50px;
	transition: left 2.4s;
	animation: pig 4.8s infinite;
}
@keyframes pig {
    0% {
      left: 20px;
	  transform: scale(-1, 1)
    }
    49% {
      left: 300px;
	  transform: scale(-1, 1)
    }
	50% {
      left: 300px;
	  transform: scale(1, 1)
    }
    100% {
      left: 20px;
	  transform: scale(1, 1)
    }

}
    <div class="pig"></div>

    • 2
  2. Best Answer

    transition根本不适用于动画。您可以制作两个动画，或更改其中一个的参数。我更喜欢这两个版本：

    .pig {
  background: url(http://i.imgur.com/VEJ5nms.gif) no-repeat;
  height: 42px;
  width: 59px;
  position: absolute;
  top: 50px;
  animation: pig-left 4.8s infinite, pig-scale 4.8s steps(1) infinite;
}

@keyframes pig-left {
    0% { left:  20px; }
   50% { left: 300px; }
  100% { left:  20px; }
}

@keyframes pig-scale {
    0% { transform: scaleX( 1); }
   50% { transform: scaleX(-1); }
  100% { transform: scaleX( 1); }
}
    <div class="pig"></div>

    PS：如果她不用倒着跑，那你需要调换1和-1的位置:)

    • 2 

  3. .pig {
    background: url(http://i.imgur.com/VEJ5nms.gif) no-repeat;
    height: 42px;
    width: 59px;
    position: absolute;
    top: 50px;
	transition: left 2.4s;
	animation: pig 4.8s infinite, pig-rotate 4.8s steps(1) infinite;
}
@keyframes pig {
    0% {
      left: 20px;

    }
	50% {
      left: 300px;

    }
	100% {
      left: 20px;
    }
}
@keyframes pig-rotate {
    0% {
	  transform: scale(-1, 1)
    }
	50% {
     
	  transform: scale(1, 1)
    }
    100% {
    transform: scale(-1, 1)
    }
}
    <div class="pig"></div>

    • 1

相关问题