web前端入门到实战：css3动画 Transition
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
例子：
<body>
<p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
<div></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度*/
}
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频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)
相关推荐
myloveqiqi 2020-08-09
AlisaClass 2020-07-19
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20