CSS3动画中的animation-timing-function效果演示
CSS3动画(animation)属性有如下几个:
属性 | 值 | 说明 |
animation-name | name | 指定元素要使用的keyframes名称 |
animation-duration | time(ms、s) | 指定动画时长 |
animation-timing-function | linear、ease(默认)、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) | 设置动画将如何完成一个周期 |
animation-delay | time(ms、s) | 设置动画启动前的延迟间隔(只会执行一次) |
animation-iteration-count | 1(默认)、n、infinite | 定义动画播放次数 |
animation-direction | normal(默认)、reverse、alternate、alternate-reverse | 指定是否轮流反向播放动画 |
animation-fill-mode | none(默认)、forwards、backwards、both | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
animation-play-state | running、paused |
指定动画运行或者暂停 |
本片博文主要记录一下 animation-timing-function 的各个值的动态效果,方便日后查阅。
1. linear:动画从头到尾的速度是相同的,匀速变化
2. ease:慢 -> 快 -> 慢
3. ease-in:慢 -> 匀速
4. ease-out:匀速 -> 慢
5. ease-in-out: 慢 -> 匀速 -> 慢
以上5个动画运行效果的总结只是基于视觉上的阐述,详细请参阅 详细说明
6. cubic-bezier(0.68, -0.55, 0.27, 1.55):4个参数自己设定
贝塞尔函数常用来制作有反弹效果的动画,参数相关 查看详细
CSS3动画中的animation-timing-function效果演示的更多相关文章
- Css3动画-@keyframes与animation
一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...
- CSS3动画 相比JS Animation 哪个更快?
CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应 ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- css3动画中的steps值详解
css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线 ...
- CSS3动画属性之Animation
首先定义一个动画规则: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox ...
- CSS3动画中的位置设定问题
水平居中的不同方法实现: position: absolute; margin: auto; left:; right:; position: absolute; left:%; -webkit-tr ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- css3学习--css3动画详解二(3d效果)
一.设置3D场景 perspective:800 //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴) //视点的位置 transf ...
- css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)).(匀速) ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0. ...
随机推荐
- zookeeper命令行操作
创建 #[-s] 顺序 #[-e] 临时节点 #path 节点 #data 该节点存储的数据 #acl 证书 create [-s] [-e] path data acl -s或-e指定节点特性:顺序 ...
- Servlet&&Jsp 概述
主题 Servlet的作用 构建动态网页 Servlet代码初探 Servlet与其他技术的对比 Jsp的作用 Servlet的作用 Servlet是在web服务器或应用服务器上用来动态生成html的 ...
- 基于Redis的分布式锁的简单实现
Redis官方给出两种思路 第一种:SET key value [EX seconds] [PX milliseconds] NX 第二种:SETNX+GETSET 首先,分别看一下这几个命令 SET ...
- 【JMedia】诺贝尔奖得主:东亚教育浪费了太多生命
10月3日,2016年诺贝尔奖开奖第一天,日本科学家大隅良典获得诺贝尔生理学或医学奖.进入21世纪,日本科学家获奖人数快速增长.包括物理奖8位.化学奖6位.生理学或医学奖3位,共计17位,平均下来差不 ...
- 图像插值:OpenCV_remap
此为opencv中remap函数移植和分析,整理了双线性的插值部分的代码尚未完全移植,但最困难的部分已经完成,而恰巧在这时,发现其实现并不是那么的令我满意,于是终止,改为自己实现.考虑到以后可能会用到 ...
- Laravel添加代码自动提示功能
在使用Laravel框架的时候,可能会碰上代码无法自动提示的情况,那么如何添加自动提示功能呢? 1,首先在composer.json中加入以下内容: "require": { &q ...
- mysql 多列索引的生效规则
mysql中 myisam,innodb默认使用的是 Btree索引,至于btree的数据结构是怎样的都不重要,只需要知道结果,既然是索引那这个数据结构最后是排好序:就像新华字典他的目录就是按照a,b ...
- WebP 图片实践之路
我们会从三部分来聊聊webp这个话题. 什么是webp,它有什么用? 使用webp的常规方法以及优劣. 我们是如何用上webp的. PS:如果是对webp有一定了解的朋友,建议直接看第三部分.因为是讲 ...
- Java客户端工具选择:HTML?Swing?XML?
整理下面的文章是因为个人觉得写的很好,关于java的客户端了解也并不是太多.看了下面的文章觉得很有必要贴出来,方便自己以后了解java客户端编程. Java软件设计师和管理人员经常会面临这样的难题:在 ...
- 20165220 学习基础和C语言基础调查
# # # # 我觉得我打游戏(不知道算不算一技之长)毕竟从小学一年级就接触到了各种形形色色的游戏,讲道理其实我的游戏天赋毕竟还是很大的,从意识到感觉我觉得都比大多数人好一些,其实吧打游戏打得好也是很 ...