Question

线性属性在CSS中意味着什么？

 background-position 0.1s linear;

我正在查看此代码，并且不熟悉线性属性。这如何改变按钮的渐变？

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -ms-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

Answer 1

单词 linear 表示css转换中使用的缓动功能 - 这正式称为“transition-timing-function”。在这种情况下，线性告诉css该元素将在此Transition的整个动画中保持相同的速度。

当我们指定一个转换时间函数时，我们定义一个曲线图来表示整个动画的速度。

Take a look at the MDN documentation here - you can see a list of the other options

要获得其他有趣的动画效果，您可以尝试“缓入”或“缓出”，它们代表动画开始变慢，加速或快速开始减速。

如果您愿意，可以使用cubic-bezier(start, mid1, mid2, end)来定义自己的宽松政策。这四个值表示Start MidPoint1 MidPoint2和动画结束时的速度。

CSS background-position 0.1s linear;

1 个答案: