动画--过渡函数 transition-timing-function
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的更多相关文章
- 监测c3动画过渡完成的事件
监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...
- vue-learning:33 - component - 内置组件 - 过渡组件transition
vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...
- 动画--过渡属性 transition-property
早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更 ...
- CSS动画 animation与transition
一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
- Vue学习笔记【20】——Vue中的动画(使用动画钩子函数)
定义及使用钩子函数 定义 transition 组件以及三个钩子函数: <div id="app"> <input type="button&q ...
- vue three.js 结合tween.js 实现动画过渡
参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...
- CSS3之边框样式(动画过渡)
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- css动画过渡
css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...
随机推荐
- Python之 continue继续循环和多重循环
Python之 continue继续循环 在循环过程中,可以用break退出当前循环,还可以用continue跳过后续循环代码,继续下一次循环. 假设我们已经写好了利用for循环计算平均分的代码: L ...
- SQL代码创建表例子
create table class ( code ) primary Key, name ) ); create table student ( code ) primary Key, name ) ...
- 后半部分样式和JS前半部分脚本语言
样式 剩余样式: 1.<div style=display:"none"></div>:nono 是隐藏该元素内容,block是显示该元素内容 2.< ...
- opencv提取截获图像(总结摘来)
opencv提取截获图像(总结摘来) http://blog.csdn.net/wuxiaoyao12/article/details/7305865 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- 在serviceImpl里使用自身的方法
@Service("tbLeaveRegisterService")@Transactionalpublic class TbLeaveRegisterServiceImpl ex ...
- linux OSlab4 添加自定义系统调用
http://blog.csdn.net/ly01kongjian/article/details/8947285 http://www.cnblogs.com/hoys/archive/2011/0 ...
- CDH商业版本的搭建(hadoop+hive+sqoop)
一:准备工作 1.步骤 1)hadoop ->下载解压 ->修改配置文件 ->hadoop-env JAVA_HOME ->core-site fs.defaultFS had ...
- php--validate表单验证
validate表单验证扩展规则 添加自定义检验(验证class) 获取html加入 class <input id="D_NUMBER" name="D_NUMB ...
- Asp.net Session保存到Redis: 使用 RedisSessionStateProvider
Install-Package Microsoft.Web.RedisSessionStateProvider 依赖于: Dependencies StackExchange.Redis.Strong ...
- QFile文件操作-QT
#include <QCoreApplication> #include<QFile> #include<QString> #include<QDebug&g ...