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. C#发送邮件(内容中有图片)

    用微软的System.Net.Mail发送邮件,有些时候发邮件需要邮件内容中添加图片. 对象解释 SmtpClient类:允许应用程序使用简单邮件传输协议 (SMTP) 发送电子邮件.MailAddr ...

  2. MySql Navicat可视化工具

    下载链接 链接:https://pan.baidu.com/s/1ca5KbpCFc4UbcYkXZDu6aA 提取码:8nku 安装比较简单,选完安装路径,下一步即可 Navicat for MyS ...

  3. JS基础语法---内置对象

    js学习中三种对象: 内置对象----js系统自带的对象 自定义对象---自己定义的构造函数创建的对象 浏览器对象---BOM的时候讲 内置对象: Math Date String Array Obj ...

  4. CentOS7 安装frp与开机启动

    1. 下载frp程序文件 https://github.com/fatedier/frp/releases 2. 解压文件 下载后解压到自己的目录,我这里解压到/usr/local/frp: 3. 添 ...

  5. 高通电池管理基于qpnp-vm-bms电压模式

    CV:Constant Voltage恒压 SMMB charger:Switch-ModeBattery Charger and Boost peripheral开关模式电池充电器和升压外围设备 O ...

  6. css发展史

      (接着上次博客的内容,现在我们进入css基础)   外部样式表  <link> 内部样式表  <style> 行内样式表  style  (多用于JS) * css注释   ...

  7. Java Web 学习(5) —— Spring MVC 之数据绑定

    Spring MVC 之数据绑定 数据绑定是将用户输入绑定到领域模型的一种特性. Http 请求传递的数据为 String 类型,通过数据绑定,可以将数据填充为不同类型的对象属性. 基本类型绑定 @R ...

  8. 【使用篇二】SpringBoot整合aop(13)

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是Spring框架中的一个重要内容,它通 ...

  9. HDU1075 What Are You Talking About(map)

    传送门 题目大意:一个单词对应另一个单词 翻译一段文字 题解:stl map走一波 代码: #include<iostream> #include<map> #include& ...

  10. jenkins传统模式发布istio应用

    一.发布金丝雀版本 Pre Setps cd /var/lib/jenkins/workspace/istio-service-user-canary/istio-service-user # 旧版本 ...