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. ubuntu下c/c++开发环境配置

    刚转好的UBUNTU14.04.01 TLS . 试了一下GCC,结果如下不能编译 gcc -o hello hello.cpp gcc: error trying to exec 'cc1plus' ...

  2. 使用dnspod进行简单的HTTP dns解析(防劫持)

    https://www.dnspod.cn/httpdns/guide https://www.dnspod.cn/misc/D%2B免费版本接口说明.pdf 最简单的get接口去请求dnspod提供 ...

  3. QObject::deleteLater()并没有将对象立即销毁,而是向主消息循环发送了一个event,下一次主消息循环收到这个event之后才会销毁对象 good

    程序编译运行过程很顺利,测试的时候也没发现什么问题.但后来我随手上传了一个1G大小的文件,发现每次文件上传到70%左右的时候程序就崩溃了,小文件就没这个问题.急忙打开任务管理器,这才发现上传文件的时候 ...

  4. C/C++ 获取汉字拼音

    参考文章:http://blog.csdn.net/thenile/article/details/6318521 在参考文章的基础上,去掉了代码中C++特有的语法和数据类型,用纯C语言实现了获取汉字 ...

  5. ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click 'Restart'

    ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click ...

  6. 插入图片<img>

    格式: <img src="图片地址" alt="下载失败时的替换文本" title="提示文本"> src:图像的位置 alt ...

  7. JQuery直接调用asp.net后台WebMethod方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.[WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的 ...

  8. C++中string转化为常用数值类型

    //模板类 用于将string类型转化为 常用数值类型 template <class Type> Type stringToNum(const string& str) { is ...

  9. 实现 UISegmentControl 与 UIScrollView的上下级联(分别在相应的方法中加入级联代码)

    实现 UISegmentControl 与 UIScrollView的上下级联,需要在 [segmentCtr addTarget:self action:@selector(segmentedCon ...

  10. mysql导入导出

    1.导入整个库 进入数据库,source 进去的语句等同于直接连接数据库后数据的语句 >source /var/www/test.sql 或者 sy$ mysql -uroot -p 数据库名( ...