美文网首页
CSS3 过渡

CSS3 过渡

作者: LorenSLJ | 来源:发表于2018-11-04 22:47 被阅读0次

    通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

    它如何工作？

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
    要实现这一点，必须规定两项内容：
      规定您希望把效果添加到哪个 CSS 属性上
      规定效果的时长

    实例

    向宽度、高度和转换添加过渡效果：

    div {
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;
}

    点我测试

    多项改变

    如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。

    transition 属性

    浏览器支持

    Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
    Safari 支持替代的 -webkit-transition 属性。
    注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

    定义和用法

    transition 属性是一个简写属性，用于设置四个过渡属性：
      transition-property
      transition-duration
      transition-timing-function
      transition-delay
    注释：请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。

    语法
    transition: property duration timing-function delay;
    值 描述
    transition-property 规定设置过渡效果的 CSS 属性的名称。
    transition-duration 规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function 规定速度效果的速度曲线。
    transition-delay 定义过渡效果何时开始。
    实例

    把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

    div {
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
}

    点击测试

    transition-property 属性

    浏览器支持

    Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。
    Safari 支持替代的 -webkit-transition-property 属性。
    注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。

    定义和用法

    transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
    提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
    注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

    语法
    transition-property: none|all|property;
    值 描述
    none 没有属性会获得过渡效果。
    all 所有属性都将获得过渡效果。
    property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
    实例

    把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：

    div {
    transition-property:width;
    -moz-transition-property: width; /* Firefox 4 */
    -webkit-transition-property:width; /* Safari 和 Chrome */
    -o-transition-property:width; /* Opera */
}

    点击测试

    transition-duration 属性

    浏览器支持

    Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性。
    Safari 支持替代的 -webkit-transition-duration 属性。
    注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-duration 属性。

    定义和用法

    transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

    语法
    transition-duration: time;
    值 描述
    time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
    实例
    div {
    transition-duration: 5s;
    -moz-transition-duration: 5s; /* Firefox 4 */
    -webkit-transition-duration: 5s; /* Safari 和 Chrome */
    -o-transition-duration: 5s; /* Opera */
}

    点击测试

    transition-timing-function 属性

    浏览器支持

    Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-timing-function 属性。
    Safari 支持替代的 -webkit-transition-timing-function 属性。
    注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性。

    定义和用法

    transition-timing-function 属性规定过渡效果的速度曲线。
    该属性允许过渡效果随着时间来改变其速度。

    语法
    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
    值 描述
    linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
    ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
    ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
    ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
    ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    实例1

    为了更好地理解不同的函数值，请看下面带有五个不同值的五个不同的 div 元素：

    #div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

    点击测试

    实例2

    与上例相同，但通过 cubic-bezier 来规定速度曲线：

    #div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

    点击测试

    transition-delay 属性

    浏览器支持

    Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。
    Safari 支持替代的 -webkit-transition-delay 属性。
    注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。

    定义和用法

    transition-delay 属性规定过渡效果何时开始。
    transition-delay 值以秒或毫秒计。

    语法
    transition-delay: time;
    值 描述
    time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
    实例

    在过渡效果开始前等待 2 秒：

    div {
    transition-delay: 2s;
    -moz-transition-delay: 2s; /* Firefox 4 */
    -webkit-transition-delay: 2s; /* Safari 和 Chrome */
    -o-transition-delay: 2s; /* Opera */
}

    点击测试

    相关文章

      网友评论

          本文标题：CSS3 过渡

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS3 过渡|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！