CSS3之过渡

作者: LemonnYan | 来源:发表于2018-06-09 23:02 被阅读28次

一、CSS3过渡简介

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

CSS3过渡与元素上的常规样式一起声明。只要目标属性更改,浏览器就会应用过渡。在CSS中可以通过一些伪类触发,如:hover、:focus、:target:checked等。

使用CSS创建简单过渡的步骤:

  • 在默认样式中声明元素的初始状态样式;
  • 声明过渡元素最终状态样式,比如悬浮状态;
  • 在默认样式中通过添加过渡函数,添加一些不同的样式。

二、CSS3过渡属性

transition属性是一个复合属性,出于简洁性和便于维护考虑,过渡语法通常以简化的形式表达。
语法:transiton:transition-property|transition-duration|transiton-timing-function|transition-delay

参数说明:

  • transition-property:指定过渡或动态模拟的CSS属性;
  • transition-duration:指定完成过渡所需的时间;
  • transition-timing-function:指定过渡函数;
  • transition-delay:指定过渡开始出现的延迟时间。

transition:<过渡属性> <过渡所需时间> <过渡动画函数> <过渡延迟时间>
transition属性值可以使用简写的形式,中间用空格分隔。

1、指定过渡属性transition-property

通过transition-property属性来指定过渡动画的CSS属性名称。
语法:transition-property:none|all|single-transiton-preoperty
参数说明:

  • none:没有指定任何样式
  • all:默认值,表示指定元素所有支持transition-property属性的样式;
  • single-transition-property:指定样式,其等于all或<IDENT>

用transition-property指定过渡属性并不是所有属性都可以过渡,只有具有一个中点值的属性才能具备过渡效果。

支持transition过渡功能的CSS属性表

background-color background-position border-bottom-color border-bottom-width
border-left-color border-left-width border-right-color border-right-width
border-spacing border-top-color border-top-width bottom
clip color font-size font-weight
height left letter-spacing line-height
margin-bottom max-width min-height min-width
opacity outline-color outline-width padding-bottom
padding-left padding-right padding-top right
text-indent text-shadow vertical-align visibility
width word-spacing z-index

在设置过渡属性时,不局限于单一的一套样式,可以同时设置多个过渡样式,只不过在样式之间用逗号隔开。

2、指定过渡所需时间transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间。
语法:transition-duration:<time>,time为数值,单位为s(秒)或ms(毫秒)。默认值为0。取值为0时,指定元素样式过渡时,看不到过渡过程,直接看到结果。

示例效果图:将正方形过渡到圆形


示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3过渡</title>
    <style>
      .transition{
        background: #8ec63f;
        width:100px;
        height: 100px;
        border-radius: .5em;
        transition-property:background,border-radius;
        transition-duration:.5s,1s;
        transition-timing-function:linear,ease-in;
        transition-delay:1s;
      }
      .transition:hover{
        background:#f7941d;
        border-radius:50%;
      }
    </style>
</head>
<body>
    <div class="transition"></div>
</body>
</html>

3、指定过渡函数transition-timing-function

transition-timing-function属性指定某种指代过渡“缓动函数”属性。可以将某个值指定为预定义函数、阶梯函数或三次贝塞尔曲线。
语法:transition-timing-function:<single-transition-timing-function>

(1)单一的过渡函数

函数 功能描述
ease 默认值, 元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢
linear 元素样式从初始状态过渡到终止状态时速度是恒速
ease-in 元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态,这种效果称为渐显效果
ease-out 元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态,这种效果称为渐隐效果
ease-in-out 元素样式从初始状态过渡到终止状态时,先加速再减速,这种效果称为渐显渐隐效果

(2)三次贝塞尔曲线

CSS3的transition中,定义三次贝塞尔曲线的语法:cubic-bezier(p0,p1,p2,p3),三次贝塞尔曲线中的每个点值只允许0~1之间的值。
例如:transition-timing-function:cubic-bezier(.85,0,1,1)
使用三次贝塞尔曲线函数,可以自定义动画的过渡速度。

(3) step()函数

step()函数用于把整个操作领域划成同样大小的间隔,每个间隔都是相等。
语法:step(<integer>[start|end]
step()函数主要包括两个属性:

  • <integer>:用来指定step()函数的间隔数量,必须是一个大于0的正整数。
  • start或end:这个参数是可选的,默认值为end。

例如,想要动画有七个步骤,且动画结束发生在最后一步:transition-timing-function:step(7,end)

4、指定过渡延迟时间transition-delay

transition-delay用来指定一个动画开始执行的时间,也就是当改变元素属性值之后多长时间开始执行过渡效果。
语法:transition-delay:<time>,<time>可以是正整数、负整数和0,非零的时候必须将单位设置为s(秒)或ms(毫秒)。

  • 正整数:元素的过渡动作不会立即触发,当过了设定的时间值之后才触发;
  • 负整数:元素的过渡动作会从该时间点开始显示,之前的动作被截断;
  • 0:默认值,元素的过渡动作会立即触发,没有任何延迟。

相关文章

  • 05_css中的过渡和动画效果了解吗

    一、CSS3 过渡 1、CSS3 过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果。 (1)实现过渡效...

  • 好程序员web前端培训技术之CSS3过渡

    好程序员web前端培训技术之CSS3过渡 transition css3的transition允许css的属性值在...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • CSS3 过渡

    CSS3 过渡 | transition 属性 属性 如何工作 CSS3过渡是元素从一种样式逐渐改变为另一种的效果...

  • 《响应式Web设计:HTML5和CSS3实战(第2版)》08章

    响应式Web设计:HTML5和CSS3实战(第2版) 第八章 CSS3过渡、变形和动画 过渡——transitio...

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • 九、CSS新特性

    CSS3过渡动画 1、transition-property 设置过渡的属性,比如:width height ba...

  • CSS3之过渡

    一、CSS3过渡简介 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在...

  • CSS学习笔记——一些属性

    CSS3 transition 规定应用过渡效果(当指定的 CSS 属性改变时,过渡效果将开始)。 过渡效果通常在...

网友评论

    本文标题:CSS3之过渡

    本文链接:https://www.haomeiwen.com/subject/njrxeftx.html