Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use the transition attribute of css. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Purpose: used to control the rate of change of elements in the page

Features: need to be triggered by the user (the biggest difference from animate)

When we hover the mouse over the element, the width of the element instantly becomes 200px, which reduces the user experience. Through CSS transition, we define the movement time, delay time and speed of the element in the process of change!

Grammar

Transition:property duration timing-funtion delay

Transition-property: specifies the name of the CSS property that sets the transition effect.

Transition-duration: define animation time

Transition-timing-funtion: define the speed function

Linear

Ease

Ease-in

Ease-out

Ease-in-out

Cubic-bezier (n ~ n ~ n)

Transition-delay: defines when the transition effect begins (how long to postpone the transition effect)

Define multiple animation attribut

Transition: width 2s, height 2s

As long as the two attribute definitions are separated by ","

If the following is the case, the "3s" time setting will not be used during the transition

Transition-property: width, height

Tansition-duration: 2s, 1s, 3s

If so, time loops to undefined attributes

Js syntax

Object.style.transition= "width 2s"

Monitor transition

These are all the contents of this article entitled "how to use the transition attribute of css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.