**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: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频
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)
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/a695f10b3921