标签：动画效果 变化 fill mat clip out ott basis 查看
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)
原文：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
标签：动画效果 变化 fill mat clip out ott basis 查看
原文地址：https://www.cnblogs.com/xjy20170907/p/11599713.html
