2

What does the linear attribute mean in CSS?

 background-position 0.1s linear;

I am looking at this code and am unfamiliar with the linear attribute. How does this change the gradient of a button?

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

1 Answer 1

4

The word linear represents the easing functionality used in your css transition - this is formally known as a "transition-timing-function". In this case linear is telling the css that this element will maintain the same speed throughout the animation of this Transition.

When we specify a transition-timing-function we are defining a curve graph that represents the speed throughout the animation.

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

To get other interesting animation effects you can try "ease-in" or "ease-out" which represent animations that start slower and speed up or start quickly and slow down.

Using cubic-bezier(start, mid1, mid2, end) you can even define your own easing if you were so inclined. The four values represent speed at Start MidPoint1 MidPoint2 and End of the animation.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.