CSS background-position 0.1s 线性；

【问题标题】：CSS background-position 0.1s linear;CSS background-position 0.1s 线性；
【发布时间】：2013-05-28 19:17:51
【问题描述】：

CSS中的linear属性是什么意思？

 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;
}

【问题讨论】：

标签： css css-animations background-position

【解决方案1】：

linear 一词表示在您的 css 过渡中使用的缓动功能 - 这正式称为“过渡定时功能”。在这种情况下，linear 告诉 css 这个元素将在整个过渡动画中保持相同的速度。

当我们指定一个transition-timing-function时，我们定义了一个曲线图来表示整个动画的速度。

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

要获得其他有趣的动画效果，您可以尝试“ease-in”或“ease-out”，它们表示开始较慢和加速或快速开始和减速的动画。

如果您愿意，甚至可以使用cubic-bezier(start, mid1, mid2, end) 定义自己的缓动。这四个值分别代表 Start MidPoint1 MidPoint2 和 End of the animation 的速度。

【讨论】：