Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动
时间:2019-10-25
本文章向大家介绍Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动,主要包括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
.
练习代码: (不需要全部写,填空进去)
1 <style> 2 3 #ball { 4 width: 100px; 5 height: 100px; 6 margin: 50px auto; 7 position: relative; 8 border-radius: 50%; 9 background: linear-gradient( 10 35deg, 11 #ccffff, 12 #ffcccc 13 ); 14 animation-name: bounce; 15 animation-duration: 1s; 16 animation-iteration-count: infinite; 17 } 18 19 @keyframes bounce{ 20 0% { 21 top: 0px; 22 } 23 50% { 24 top: 249px; 25 width: 130px; 26 height: 70px; 27 } 28 100% { 29 top: 0px; 30 } 31 } 32 </style> 33 <div id="ball"></div>
效果:
在设置区域内,带一个好看背景色的小球,上下弹动,小球的大小会挤压又恢复,通过@keyframe设置的0%-100%的值实现的
原文地址:https://www.cnblogs.com/jane-panyiyun/p/11738794.html
- Web开发之CSS
- Linux重启命令与如何重启网络?
- spring boot + embed tomcat + standalone jar的内存泄露问题
- 树莓派:设置与软件安装
- spring-boot 速成(11) - 单元测试
- OOAD-设计模式(四)结构型模式之适配器、装饰器、代理模式
- 2018年智能家居行业趋势 写在2017年关键词里
- 树莓派与arduino通信
- process information unavailable 的解决办法
- JS魔法堂:再识IE的内存泄露
- 给树莓派安装中文字库
- Hadoop(十七)之MapReduce作业配置与Mapper和Reducer类
- Design Pattern: Observer Pattern
- Hadoop(十六)之使用Combiner优化MapReduce
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP CURL中传递cookie的方法步骤
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
- Yii2处理密码加密及验证的方法
- PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
- python如何输出反斜杠
- 在Laravel5中正确设置文件权限的方法
- asp函数split()对应php函数explode()
- php获取目录下所有文件及目录(多种方法)(推荐)
- Python基于Twilio及腾讯云实现国际国内短信接口
- PHP __call()方法实现委托示例
- PHP中rename()函数的妙用讲解
- php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
- php实现小程序支付完整版
- Yii2框架视图(View)操作及Layout的使用方法分析
- php实现单笔转账到支付宝功能