CSS transitions provides a method for controlling the speed of the animation when changing CSS properties.
Which allows property to be a change of course for some time, rather than immediate effect. For example, an element of the color from white to black, this change is generally effective immediately, after use of the color element CSS transitions gradually from white to black, according to a certain change in the rate curve. This process can be customized.
CSS transitions can decide which properties occur animations (specifically list these attributes), when to start (setting delay), how long (set duration) and how to animate (defined in the Timing funtion , such as constant speed or slow down after).
Animation can be a list of attributes are:
-moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius border-left border-left-color border-left-width border-radius border-right border-right-color border-right-width border-start-end-radius border-start-start-radius border-top border-top-color border-top-left-radius border-top-right-radius border-top-width border-width bottom box-shadow caret-color clip clip-path color column-count column-gap column-rule column-rule-color column-rule-width column-width columns filter flex flex-basis flex-grow flex-shrink font font-size font-size-adjust font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-bottom margin-left margin-right margin-top mask mask-border mask-position mask-size max-height max-lines max-width min-height min-width object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order outline outline-color outline-offset outline-width padding padding-bottom padding-left padding-right padding-top perspective perspective-origin right rotate row-gap scale scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-emphasis text-emphasis-color text-indent text-shadow top transform transform-origin Translate Vertical Number of - align = left visibility width Word - spacing z - index Zoom
property details, please refer to: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
example:
<body> <P> with a plurality of attributes box animation:. width, height, background- color, transform the cursor over the box to view the animation. </ P> <div class = "Box"> </ div> </ body> .box { border-style : Solid ; border-width : 1px ; the display : Block ; width : 100px ; / * Initial value * / height : 100px ; / * initial value * / background-Color : # 0000FF ; / * initial value * / -webkit-Transition :2S width, height 2S, background Color-2S, 2S -webkit-Transform ; Transition : width 2S, 2S height, background-Color 2S, 2S Transform ; } / * mouse suspended triggered when the style of animation * / .box: hover { Color-background : #FFCCCC ; / * becomes #FFCCCC within 2S * / width : 200px ; / * becomes 200 is the 2S * / height : 200px ; / * becomes 200 is the 2S * / -webkit-Transform : Rotate (180deg) ; the Transform : Rotate (180deg) ; / * rotated 180 degrees within 2S * / }
transition is not an infinite loop.
a plurality of transition is shorthand property attribute values thereof. It includes, in order:
transition-property to specify which of the CSS properties for the transition. Only the specified attributes will occur in the transition animation, the other property is still as usual instantaneous change.
transition-duration Specifies the length of the transition. You can specify a plurality of long, each duration is applied to the transition-property specified by the corresponding attribute. If the number is less than the length specified number of attributes, the long list is repeated. If the length of the list is longer, then the list will be laid off.
Timing-function-transition the CSS properties affected by the transition, changing an intermediate value is generated, and the transition-timing-function attributes used to describe how the calculated intermediate value. Essentially, this function by establishing an acceleration profile, so the whole transition process of change, rate of change may be changing. This acceleration profile is defined by transition-timing-function, then a transition effect to each CSS property. It may be provided a plurality of timing function, according to the list of transition property to each of the respective CSS property application timing function. If the timing function of the number smaller than the number of transition property, the missing value is set to an initial value (ease). If the timing function to be more than the transition property, timing function function list is truncated to the appropriate size.
transition-timing-function values:
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)
Original: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions