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 相关文章推荐
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
box-shadow单边阴影的实现
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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
setTimeout学习小结
2017/02/08 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
前端面试知识点目录一览
2019/04/15 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python中如何添加自定义模块
2020/06/09 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
物流管理系毕业生求职信
2014/06/03 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
python b站视频下载的五种版本
2021/05/27 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS