In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation.

If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.

There are a number of predefined keywords available for popular options. For example, the default value is ease, which starts slow, speeds up in the middle, and then slows down again in the end.

Other options include ease-out, which is quick in the beginning then slows down, ease-in, which is slow in the beginning, then speeds up at the end, or linear, which applies a constant animation speed throughout.

练习题目:

For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out.

Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.

练习代码:

 <style>

   .balls {
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left:27%;
animation-timing-function: linear;
}
#ball2 {
left:56%;
animation-timing-function: ease-out;
} @keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
} </style> <div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

效果如下:

注意,因为循环时间相同,所以2个小球不同速率,但同一时间结束

FCC---Change Animation Timing with Keywords--两个小球从A都B,相同循环时间 duration, 不同的速度 speed的更多相关文章

  1. 第七讲:HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  2. csdn肿么了,这两天写的博文都是待审核

    昨天早上8点写了一篇博文,然后点击发表,结果系统显示"待审核".于是仅仅好qq联系csdn的客服,等到9点时候,csdn的客服上线了,然后回复说是链接达到5个以上须要审核,于是回到 ...

  3. 两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走 (不加flex不自动撑开)

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  4. JavaScript Timing 事件及两种时钟写法

    JavaScript 可以在时间间隔内执行. 这就是所谓的定时事件( Timing Events). ------------------------------------------------- ...

  5. 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)

    Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...

  6. JS分两种数据类型,你都知道吗?

    大牛请无视此篇! JS主要分基本数据类型和引用数据类型,这两者区别可大了,此篇看完必有长进,下面进入正题 首先我们看下什么是基本数据类型(概念我就不说了,直接上代码): var i = 10: var ...

  7. Java中只有按值传递,没有按引用传递!(两种参数情况下都是值传递)

    今天,我在一本面试书上看到了关于java的一个参数传递的问题: 写道 java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? 我毫无疑问的回答:“引用传递!”,并且还觉得自己对java的这 ...

  8. 虚拟机配置双网卡适配器后(桥接和NAT模式),重新打开后两个适配器的ip都没有了(重启网卡报Job for network.service failed because the control process exited with error code)

    科普双网卡适配器的好处: 我是配了一个桥接模式的网卡和一个NAT模式的网卡,桥接模式,也就是将虚拟机的虚拟网络适配器与主机的物理网络适配器进行交接,虚拟机中的虚拟网络适配器可通过主机中的物理网络适配器 ...

  9. 【代码更新】单细胞分析实录(21): 非负矩阵分解(NMF)的R代码实现,只需两步,啥图都有

    1. 起因 之前的代码(单细胞分析实录(17): 非负矩阵分解(NMF)代码演示)没有涉及到python语法,只有4个python命令行,就跟Linux下面的ls grep一样的.然鹅,有几个小伙伴不 ...

随机推荐

  1. [Spring cloud 一步步实现广告系统] 4. 通用代码模块设计

    一个大的系统,在代码的复用肯定是必不可少的,它能解决: 统一的响应处理(可以对外提供统一的响应对象包装) 统一的异常处理(可以将业务异常统一收集处理) 通用代码定义.配置定义(通用的配置信息放在统一的 ...

  2. OC-类似歌词字体颜色逐字变化的实现方法

    预期实效果图如下: 如上图所示,文字的颜色会根据时间的移动,逐字变成绿色. 实现方法:(1)调用方法: 用 void UIRectFillUsingBlendMode(CGRect rect, CGB ...

  3. 中间人攻击,HTTPS也可以被碾压

    摘要: 当年12306竟然要自己安装证书... 原文:知道所有道理,真的可以为所欲为 公众号:可乐 Fundebug经授权转载,版权归原作者所有. 一.什么是MITM 中间人攻击(man-in-the ...

  4. scp 拷贝 针对软连接的问题

    scp时经常把软连接变成拷贝了两遍,rsync -l可以避免这个问题 1. ln 软连接的scp 我们在系统中,经常用到软连接:当我们从远程机器scp  数据时,这个软连接不会cp过来:而是: 把软连 ...

  5. Redis 通过 scan 找出不过期的 key

    SCAN 命令是一个基于游标的迭代器(cursor based iterator):SCAN 命令每次被调用之后,都会向用户返回一个新的游标,用户在下次迭代时需要使用这个新游标作为 SCAN 命令的游 ...

  6. PyCharm设置完自动上传,却不会自动上传任何内容

    Upload changed files automatically to the default server 选择了 Always 下面有一个提示 Default server or group ...

  7. [Go] 在golang中使用正则表达式捕获子表达式

    正则匹配并且可以捕获到()这个里面的子表达式的值,linux的grep命令没办法捕获子表达式的值,只能获取到整条正则匹配的内容 package main import "regexp&quo ...

  8. s3c2440裸机-时钟编程(二、配置时钟寄存器)

    s3c2440裸机编程-时钟编程(二.配置时钟寄存器) 1.2440时钟时序 下图是2440时钟配置时序: 1.上电后,nRESET复位信号拉低,此时cpu还无法取指令工作. 2.nRESET复位信号 ...

  9. JVM-5-GC(Garbage Collection) 垃圾回收机制

    GC(Garbage Collection)  垃圾回收机制   什么是垃圾回收机制 垃圾回收是一种动态存储管理技术,它自动地释放不再被程序引用的对象,按照特定的垃圾收集算法来实现资源自动回收的功能. ...

  10. 实操《kubernetes网络权威指南》之tun设备

    跟着网上作一次,OK的. tun.c #include <net/if.h> #include <sys/ioctl.h> #include <sys/stat.h> ...