web前端入门到实战:css3动画 Transition
其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 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)