CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing funtion，比如匀速地或先快后慢)。
可动画属性的列表是：
-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-align visibility width word-spacing z-index zoom
属性详情请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
例子：
<body> <p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p> <div class="box"></div> </body> .box { border-style: solid; border-width: 1px; display: block; width: 100px; /*初始值*/ height: 100px; /*初始值*/ background-color: #0000FF; /*初始值*/ -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s; transition:width 2s, height 2s, background-color 2s, transform 2s; } /*鼠标悬浮的时候触发动画样式*/ .box:hover { background-color: #FFCCCC; /*在2s内变成#FFCCCC*/ width:200px; /*在2s内变成200*/ height:200px; /*在2s内变成200*/ -webkit-transform:rotate(180deg); transform:rotate(180deg); /*在2s内旋转180度*/ }
transition没有无限循环。
transition是由多个属性值组成的简写属性。依次包括：
transition-property指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
transition-duration指定过渡的时长。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。
transition-timing-function CSS属性受到transition的影响，会产生不断变化的中间值，而transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。这条加速度曲线被transition-timing-function所定义，之后作用到每个CSS属性的过渡。可以规定多个timing function，根据transition property的列表给每个CSS属性应用相应的timing function。如果timing function的个数比transition property中数量少，缺少的值被设置为初始值（ease） 。如果timing function比transition property要多，timing function函数列表会被截断至合适的大小。
transition-timing-function的取值：
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)
transition-delay规定了在过渡效果开始作用之前需要等待的时间。值以秒（s）或毫秒（ms）为单位。值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。可以指定多个延迟时间，每个延迟将会分别作用于所指定的相符合的transition-property。
检测过渡是否完成
当过渡完成时触发一个事件。在符合标准的浏览器下，这个事件是 transitionend，在 WebKit 下是 webkitTransitionEnd。这个事件提供两个属性：
propertyName：字符串，表示已完成过渡的属性。
elapsedTime：浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受transition-delay影响。
可以使用element.addEventListener()方法来监听这个事件：
el.addEventListener("transitionend", updateTransition, true);
当属性值列表长度不一致时
以transition-property的值列表长度为标准，如果某个属性值列表长度短于它的，则重复其值以长度一致。例如：
div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; }
将按照下面这样处理：
div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; }
如果某个属性的值列表长于transition-property，将被截断。例如：
div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; }
将按照下面这样处理：
div { transition-property: opacity, left; transition-duration: 3s, 5s; }
以下例子设置了菜单的外观，在鼠标悬浮时，菜单里的元素的文字、颜色及背景色都发生了变化：
<div class="sidebar"> <p><a class="menuButton" href="home">Home</a></p> <p><a class="menuButton" href="about">About</a></p> <p><a class="menuButton" href="contact">Contact Us</a></p> <p><a class="menuButton" href="links">Links</a></p> </div>
.menuButton { position: relative; transition-property: background-color, color; transition-duration: 1s; transition-timing-function: ease-out; text-align: left; background-color: grey; left: 5px; top: 5px; height: 26px; color: white; border-color: black; font-family: sans-serif; font-size: 20px; text-decoration: none; box-shadow: 2px 2px 1px black; padding: 2px 4px; border: solid 1px black; } .menuButton:hover { position: relative; transition-property: background-color, color; transition-duration: 1s; transition-timing-function: ease-out; background-color:white; color:black; box-shadow: 2px 2px 1px black; }
原文：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions