transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

(单击图片可放大)

案例展示:

在hover状态下,让容器从一个正方形慢慢过渡到一个圆形,而整个过渡是先加速再减速,也就是运用ease-in-out函数。

HTML代码:

<div></div>

CSS代码:

div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
div:hover {
border-radius: 100%;
}

演示结果

鼠标移入:

鼠标移出:

动画--过渡函数 transition-timing-function的更多相关文章

  1. 监测c3动画过渡完成的事件

    监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...

  2. vue-learning:33 - component - 内置组件 - 过渡组件transition

    vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...

  3. 动画--过渡属性 transition-property

    早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更 ...

  4. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  5. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  6. Vue学习笔记【20】——Vue中的动画(使用动画钩子函数)

    定义及使用钩子函数 定义 transition 组件以及三个钩子函数:  <div id="app">    <input type="button&q ...

  7. vue three.js 结合tween.js 实现动画过渡

    参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...

  8. CSS3之边框样式(动画过渡)

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  9. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

随机推荐

  1. Python之 continue继续循环和多重循环

    Python之 continue继续循环 在循环过程中,可以用break退出当前循环,还可以用continue跳过后续循环代码,继续下一次循环. 假设我们已经写好了利用for循环计算平均分的代码: L ...

  2. SQL代码创建表例子

    create table class ( code ) primary Key, name ) ); create table student ( code ) primary Key, name ) ...

  3. 后半部分样式和JS前半部分脚本语言

    样式 剩余样式: 1.<div style=display:"none"></div>:nono 是隐藏该元素内容,block是显示该元素内容 2.< ...

  4. opencv提取截获图像(总结摘来)

    opencv提取截获图像(总结摘来) http://blog.csdn.net/wuxiaoyao12/article/details/7305865 版权声明:本文为博主原创文章,未经博主允许不得转 ...

  5. 在serviceImpl里使用自身的方法

    @Service("tbLeaveRegisterService")@Transactionalpublic class TbLeaveRegisterServiceImpl ex ...

  6. linux OSlab4 添加自定义系统调用

    http://blog.csdn.net/ly01kongjian/article/details/8947285 http://www.cnblogs.com/hoys/archive/2011/0 ...

  7. CDH商业版本的搭建(hadoop+hive+sqoop)

    一:准备工作 1.步骤 1)hadoop ->下载解压 ->修改配置文件 ->hadoop-env JAVA_HOME ->core-site fs.defaultFS had ...

  8. php--validate表单验证

    validate表单验证扩展规则 添加自定义检验(验证class) 获取html加入 class <input id="D_NUMBER" name="D_NUMB ...

  9. Asp.net Session保存到Redis: 使用 RedisSessionStateProvider

    Install-Package Microsoft.Web.RedisSessionStateProvider 依赖于: Dependencies StackExchange.Redis.Strong ...

  10. QFile文件操作-QT

    #include <QCoreApplication> #include<QFile> #include<QString> #include<QDebug&g ...