CODEWITHSUNDEEP
csscss-animationsbackground-position
ryanjohnsond
ryanjohnsond

Reputation: 513

CSS background-position 0.1s linear;

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

Upvotes: 2

Views: 1449

Answers (1)

Joe
Joe

Reputation: 2105

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.

Upvotes: 4

Related Questions