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 动画技术
Jul 27 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 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
substr()函数中文版
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
django解决跨域请求的问题
2018/11/11 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python绘制高斯曲线
2021/02/19 Python
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
JavaScript实现队列结构过程
2021/12/06 Javascript
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android