FCC---Change Animation Timing with Keywords--两个小球从A都B,相同循环时间 duration, 不同的速度 speed
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的更多相关文章
- 第七讲:HTML5中的canvas两个小球全然弹性碰撞
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...
- csdn肿么了,这两天写的博文都是待审核
昨天早上8点写了一篇博文,然后点击发表,结果系统显示"待审核".于是仅仅好qq联系csdn的客服,等到9点时候,csdn的客服上线了,然后回复说是链接达到5个以上须要审核,于是回到 ...
- 两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走 (不加flex不自动撑开)
两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走
- JavaScript Timing 事件及两种时钟写法
JavaScript 可以在时间间隔内执行. 这就是所谓的定时事件( Timing Events). ------------------------------------------------- ...
- 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)
Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...
- JS分两种数据类型,你都知道吗?
大牛请无视此篇! JS主要分基本数据类型和引用数据类型,这两者区别可大了,此篇看完必有长进,下面进入正题 首先我们看下什么是基本数据类型(概念我就不说了,直接上代码): var i = 10: var ...
- Java中只有按值传递,没有按引用传递!(两种参数情况下都是值传递)
今天,我在一本面试书上看到了关于java的一个参数传递的问题: 写道 java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? 我毫无疑问的回答:“引用传递!”,并且还觉得自己对java的这 ...
- 虚拟机配置双网卡适配器后(桥接和NAT模式),重新打开后两个适配器的ip都没有了(重启网卡报Job for network.service failed because the control process exited with error code)
科普双网卡适配器的好处: 我是配了一个桥接模式的网卡和一个NAT模式的网卡,桥接模式,也就是将虚拟机的虚拟网络适配器与主机的物理网络适配器进行交接,虚拟机中的虚拟网络适配器可通过主机中的物理网络适配器 ...
- 【代码更新】单细胞分析实录(21): 非负矩阵分解(NMF)的R代码实现,只需两步,啥图都有
1. 起因 之前的代码(单细胞分析实录(17): 非负矩阵分解(NMF)代码演示)没有涉及到python语法,只有4个python命令行,就跟Linux下面的ls grep一样的.然鹅,有几个小伙伴不 ...
随机推荐
- 如何使用SpringBoot封装自己的Starter
作者:Sans_ juejin.im/post/5cb880c2f265da03981fc031 一.说明 我们在使用SpringBoot的时候常常要引入一些Starter,例如spring-boot ...
- .net core 拦截器的使用
.net core 拦截器的使用 实例代码:https://gitee.com/D_C_L/InterceptorTest.git 拦截器主要是将程序中的一些可以独立出去的模块进行拦截,比如幕等性,和 ...
- selenium自动化测试爬取动态页面大全
目录 一:浏览器信息测试 二:查找结点 三:测试动作 四:获取节点信息 五:切换子页面Frame 六,延时请求 七:前进和后退 八:Cookies 八:选项卡处理 九:捕获异常 这里之讲解用法,安 ...
- .netcore2.1 JS-SDK 从后台获取微信签名,实现自定义分享标题、描述、图片
最近项目移动端需要实现微信自定义分享功能,包含分享自定义标题.描述等. 首先到公众号的后台,功能设置里面,添加将要被分享的域名,如图 后端签名算法实现 ,参考腾讯开发者文档https://mp.wei ...
- iOS 自定义导航栏
参考链接:https://blog.csdn.net/huanglinxiao/article/details/100537988 demo下载地址:https://github.com/huangx ...
- 使用NDK(r20)编译FFmpeg
前两天在论坛上看到一个问题,大意是怎么在UBUNTU下使用NDK-r20编译FFmpeg.我第一反应是不该用r20,因为我在很早前用过没有gcc版本的NDK,发现有很多问题不能编译,就立马回复了个使用 ...
- 单选框radio改变事件
<input type="radio" name="bedStatus" id="allot" checked="check ...
- Centos7配置桥接网络
- 关于OpenCASCADE数组序列的起始值
C/C++的数组是从0开始计算的,5个值的数组则下标会对应 0, 1, 2, 3, 4. 在数学上可能不这么数,我所知道的 Mathematica 内的 List 是从 1 开始作为下标的. Open ...
- 【转】关闭firefox火狐浏览器下载完成时自动扫描(49.0.2以后版本)
用firefox火狐浏览器下载文件到最后时,会显示"剩余时间未知",将持续10秒钟左右,即使几KB 的文件,也要持续这么长时间,问度娘才知道是自动扫描,检查是否有毒,用的却是Goo ...