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 中实现炫酷的loading效果
Apr 26 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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实现天干地支计算器示例
2014/03/14 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
json的使用小结
2016/06/08 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python实现仿射密码的思路详解
2020/04/23 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Redis Stream类型的使用详解
2021/11/11 Redis
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python