CSS3 对过渡(transition)进行调速以及延时


Posted in HTML / CSS onOctober 21, 2020

1,使用调速函数控制过渡效果的速度曲线(加速,减速等)

使用调速函数可以设置过渡效果的速度曲线,从而实现过渡效果随着时间来改变其速度。比如:开始很慢然后加速或者开始很快然后减速。

(1)CSS3定义了如下的调速函数:

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 之间的数值。

(2)调速函数的使用
使用时只需要把调速函数跟在过渡属性的时间参数后面。如果不填的话则使用默认调速函数(ease)

transition: opacity 10s ease-in-out;

(3)使用样例1:
下面通过样例演示各种调速函数的效果区别。鼠标移入方框,方框内的方块会向右移动,同时方块会旋转,边角变圆角,背景色和文字颜色也在改变。这些样式的改变都会有过渡效果,同时由于使用不同的调速函数,过渡的快慢也是有区别的。

<!doctype html>
<html lang="en">
    <head>
    <title>hangge.com</title>
    <style>
        .trans_box {
            padding: 20px;
            
            *zoom:1;
        }
 
        .trans_list {
            width: 10%;
            height: 64px;
            margin:10px 0;
            
            color:#fff;
            text-align:center;
        }
 
        .linear {
            -webkit-transition: all 4s linear;
            -moz-transition: all 4s linear;
            -o-transition: all 4s linear;
            transition: all 4s linear;
        }
 
        .ease {
            -webkit-transition: all 4s ease;
            -moz-transition: all 4s ease;
            -o-transition: all 4s ease;
            transition: all 4s ease;
        }
 
        .ease_in {
            -webkit-transition: all 4s ease-in;
            -moz-transition: all 4s ease-in;
            -o-transition: all 4s ease-in;
            transition: all 4s ease-in;
        }
 
        .ease_out {
            -webkit-transition: all 4s ease-out;
            -moz-transition: all 4s ease-out;
            -o-transition: all 4s ease-out;
            transition: all 4s ease-out;
        }
 
        .ease_in_out {
            -webkit-transition: all 4s ease-in-out;
            -moz-transition: all 4s ease-in-out;
            -o-transition: all 4s ease-in-out;
            transition: all 4s ease-in-out;
        }
 
        .trans_box:hover .trans_list, .trans_box_hover .trans_list {
            margin-left:89%;
            
            color:#333;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            -o-border-radius:25px;
            border-radius:25px;    
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);             
        }
    </style>
</head>
<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease<br>(default)</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>   
    <div class="trans_list linear">linear</div>
</div>
</html>

(4)使用样例2:

下面通过对柱状图的宽度改变过渡,演示不同调速函数的效果区别。

<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:10px 0;
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 
#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;}
 
.trans_box:hover div
{
width:500px;
}
</style>
</head>
<body>
<div id="transBox" class="trans_box">    
    <div id="div2" style="top:150px">ease<br>(default)</div>
    <div id="div3" style="top:200px">ease-in</div>
    <div id="div4" style="top:250px">ease-out</div>
    <div id="div5" style="top:300px">ease-in-out</div>
    <div id="div1" style="top:100px">linear</div>
</div>
</body>
</html>

2,为过渡增加延时

过渡属性还可以添加一个可选的延时,用以将过渡的开始推迟一段时间。下面是一个等待1秒的例子。
延时1秒

<!doctype html>
<html lang="en">
    <head>
    <title>hangge.com</title>
    <style>
        .trans_box3 {
            padding: 20px;
            
            *zoom:1;
        }
 
        .trans_box3 div{
            width:100px;
            height:50px;
            background:#2D9900;
            color:white;
            font-weight:bold;
 
            -webkit-transition: all 2s ease-out 1s;
            -moz-transition: all 2s ease-out 1s;
            -o-transition: all 2s ease-out 1s;
            transition: all 2s ease-out 1s;
        }
 
        .trans_box3:hover div
        {
            width:500px;
        }
    </style>
</head>
<div class="trans_box3"> 
    <div>延时1秒</div>
</div>
</html>

到此这篇关于CSS3 对过渡(transition)进行调速以及延时的文章就介绍到这了,更多相关CSS3 过渡调速及延时内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 #HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 #HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 #HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 #HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 #HTML / CSS
animation和transition的区别
Oct 12 #HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 #HTML / CSS
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python中property和setter装饰器用法
2019/12/19 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Numpy 多维数据数组的实现
2020/06/18 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
教师自我反思材料
2014/02/14 职场文书
读书演讲主持词
2014/03/18 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
律师授权委托书范本
2014/10/07 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android