FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动
The previous challenges covered how to use some of the animation properties and the @keyframes
rule.
Another animation property is the animation-iteration-count
, which allows you to control how many times you would like to loop through the animation.
Here's an example:
animation-iteration-count: 3;
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.
把次数改为无线infinite就一直动。
练习题目:
To keep the ball bouncing on the right on a continuous loop, change the
animation-iteration-count
property to infinite
.
练习代码: (不需要全部写,填空进去)
<style> #ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
} @keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
效果:
在设置区域内,带一个好看背景色的小球,上下弹动,小球的大小会挤压又恢复,通过@keyframe设置的0%-100%的值实现的
FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动的更多相关文章
- Android中xml设置Animation动画效果详解
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- Android 动画——Frame Animation与Tween Animation
很多手机应用的引导页都是动画的,添加动画后的应用画面会更加生动灵活,今天博主也学习了Android中Animation的使用,下面来总结下. android中的Animation分为两种,一种是Fr ...
- Uni2D 入门 -- Animation Clip 和 Animation API
转载 csdn kakashi8841 http://blog.csdn.net/kakashi8841/article/details/17599505 Animation Clip 一个anima ...
- Android动画View Animation与Drawable Animation
Animations 一.Animations介绍 Animations是一个实现android UI界面动画效果的API,Animations提供了一系列的动画效果,可以进行旋转.缩放.淡入淡出等, ...
- Animation.setFillAfter and Animation.setFillBefore的作用
转:http://blog.csdn.net/yangweigbh/article/details/9788531 setFillAfter(boolean fillAfter) 在Android ...
- 转:在两个页面间翻转设置Animation动作的一些总结
今天碰到两个页面之间翻转的动作设计问题,发现了一些问题,故做个总结,很多都写在注释部分: 1.首先,我们来手动创建两个view以及相应的viewController.是手动,不是用IB (1)刚开始只 ...
- 设置Animation 的播放位置
AnimationState.normalizedTime 官方文档的描述 Description The normalized time of the animation. A value of 1 ...
- (手冊)Animation 之 使用Animation View
观看游戏物体上的动画(Viewing Animations on a GameObject) Animation View 是与 Hierarchy View.Scene View和Inspector ...
随机推荐
- javascript中的定时器入门
JavaScript提供定时器(timer)的功能,可以延期执行或重复执行函数或代码段. window对象提供了三个方法来实现定时器的效果,分别是setTimeout().setInternal()和 ...
- 小知识:设置sqlplus默认vi编辑器的好处
如果是客户生产环境,不允许修改任何环境类的配置,那发现sqlplus默认不是我们熟悉的vi,可以在SQL>下临时指定,方便操作: SQL> define_editor=vi SQL> ...
- SimpleDateFormat类简单学习
一.简介 SimpleDateFormat是一个格式化和解析日期的具体类,其可以将时间转化为指定格式的日期字符串,也可以将具有格式的日期字符串转换为时间. formatting (date → tex ...
- 【Web前端】VS code 快捷键tips 【陆续记录】
学习资料为:chuanzhiheima培训资料,freecodecamp300小时基础前端,<精编CSS第三版>,<Node.js 开发指南>(BYvoid编著,淘宝买的二手书 ...
- ES6-Symbol的用法 ,symbol在对象中的应用,改变值
ES6-Symbol的用法,,symbol在对象中的应用,改变值 let a = new String; let b = new Number; let c = new Boolean; let d ...
- python数据库模块
安装数据库 [mariadb] name = MariaDB baseurl = http://yum.mariadb.org/10.3/centos7-amd64 gpgkey=https://yu ...
- ubuntu 桌面版, ssh 连接时使用,x转发进行使用 gnome-terminal 时出现:Error calling StartServiceByName for org.gnome.Terminal: Timeout was reached 错误
当我按照这种情景使用时,出现了这种情况: 考虑着 gnome 桌面正在运行,可能是gnome-terminal 使用了工厂模式进行创建:查找gnome-terminal 文档,有如下解决方案: gno ...
- node.js守护进程问题的解决
最近自己写了一个node.js来读取redis数据,编写完成后按理来说加& 应该是有效的 nohup node redis.js & 但是每次关闭终端后这个进程就自动停止了,百度了下 ...
- 《Web Development with Go》两个Middleware执行顺序
也加了如果有认证时的执行流程: 一个错误, 一个正确. package main import ( "fmt" "log" "net/http&quo ...
- MongoDB学习笔记(三、MongoDB聚合与更新)
目录: 聚合 更新 更新选择器 ObjectId 更新操作的原子性 聚合: 聚合语法:db.collectionName.aggregate(aggregate_operation) 聚合操作其实就是 ...