CSS3 keyframes 实战：简易的循环弹跳动画

最新推荐文章于 2024-02-23 09:50:36 发布
最新推荐文章于 2024-02-23 09:50:36 发布
阅读量4.8k 收藏
点赞数
分类专栏： 笔记-HTML4&5/CSS2.1&3 CSS3及HTML5折腾记 文章标签： css3 chrome firefox 动画 animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crper/article/details/48277479
版权

题外话

keyframes的小练习,相信对刚掌握了keyframes理论知识的有些帮助;
百看不如一练,动手吧。

注意: 建议用chrome或者chromium内核的浏览器进行浏览器,Firefox也行

基础理论

  • keyframes是CSS3才引进的 … 使用方法是前面@keyframes Demo , Demo是自定义动画名字
  • 仅支持百分比为进度条和form-to!!!两者可以混用
  • animation有八个参数,可以分开写,可以综合写(一般一起写);
    • animation-name 规定 @keyframes 动画的名称。
    • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    • animation-timing-function 规定动画的速度曲线。默认是 “ease”。
    • animation-delay 规定动画何时开始。默认是 0。
    • animation-iteration-count 规定动画被播放的次数。默认是 1。
    • animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
    • animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
    • animation-fill-mode 规定对象动画时间之外的状态。

综合写法: animation : name 1s linear 1s inifinite alternate running both;

效果图

这里写图片描述

这里写图片描述

这里写图片描述

Live Demo

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>keyframes</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				background-color: #fe043c;
				position: relative;
				left: 50%;
				margin-left: -100px;
				-webkit-animation: Demo 6s ease-in-out infinite alternate running forwards;
				animation: Demo 6s ease-in-out infinite alternate running forwards;
			}
			.demo1 {
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background-color: #fe043c;
				position: absolute;
				left: 30%;
				margin-left: -100px;
				-webkit-animation: Demo1 6s ease-in-out infinite alternate running forwards;
				animation: Demo1 6s ease-in-out infinite alternate running forwards;
			}

			@-webkit-keyframes Demo {
				20% {
					background-color: #f68c1b;
					top: 50px;
					border-radius: 20%;
				}
				40% {
					background-color: #31b32c;
					top: 100px;
					border-radius: 40%;
					-webkit-transform: rotate(90deg) scale(1.4);
					transform: rotate(90deg) scale(1.4);
				}

				60% {
					background-color: #1b8df6;
					top: 200px;
					border-radius: 60%;
					-webkit-transform: scale(.4) translateX(300);
					transform: scale(.4) translateX(300);
				}
				80% {
					background-color: #ba38d5;
					top: 300px;
					border-radius: 80%;
					-webkit-transform: rotate(-90deg) scale(1.4);
					transform: rotate(-90deg) scale(1.4);
				}
				100% {
					background-color: #2bbada;
					top: 400px;
					border-radius: 100%;
				}
			}

			@keyframes Demo {
				20% {
					background-color: #f68c1b;
					top: 50px;
					border-radius: 20%;
				}
				40% {
					background-color: #31b32c;
					top: 100px;
					border-radius: 40%;
					-webkit-transform: rotate(90deg) scale(1.4);
					transform: rotate(90deg) scale(1.4);
				}

				60% {
					background-color: #1b8df6;
					top: 200px;
					border-radius: 60%;
					-webkit-transform: scale(.4) translateX(300);
					transform: scale(.4) translateX(300);
				}
				80% {
					background-color: #ba38d5;
					top: 300px;
					border-radius: 80%;
					-webkit-transform: rotate(-90deg) scale(1.4);
					transform: rotate(-90deg) scale(1.4);
				}
				100% {
					background-color: #2bbada;
					top: 400px;
					border-radius: 100%;
				}
			}

			@-webkit-keyframes Demo1 {
				form {
					background-color: #df5891;
					-webkit-transform: translateX(50px);
					transform: translateX(150px);
					border-radius: 25%;
					top: 100px;
				}

				50% {
					-webkit-transform: scale(2);
					transform: scale(2);
					-webkit-transform: translateX(350px);
					transform: translateX(150px);
					background-color: #642eb1;
					border-radius: 35%;
					top: 200px;
				}
				75% {
					-webkit-transform: scale(2);
					transform: scale(2.5);
					-webkit-transform: translateX(150px);
					transform: translateX(150px);
					background-color: #642eb1;
					border-radius: 55%;
					top: 400px;
				}

				to {
					background-color: #05823b;
					-webkit-transform: translateX(250px);
					transform: translateX(250px);
					border-radius: 75%;
					top: 600px;
				}
			}

			@keyframes Demo1 {
				form {
					background-color: #df5891;
					-webkit-transform: translateX(50px);
					transform: translateX(150px);
					border-radius: 25%;
					top: 100px;
				}

				50% {
					-webkit-transform: scale(2);
					transform: scale(2);
					-webkit-transform: translateX(350px);
					transform: translateX(150px);
					background-color: #642eb1;
					border-radius: 35%;
					top: 200px;
				}
				75% {
					-webkit-transform: scale(2);
					transform: scale(2.5);
					-webkit-transform: translateX(150px);
					transform: translateX(150px);
					background-color: #642eb1;
					border-radius: 55%;
					top: 400px;
				}

				to {
					background-color: #05823b;
					-webkit-transform: translateX(250px);
					transform: translateX(250px);
					border-radius: 75%;
					top: 600px;
				}
			}
		</style>
	</head>
	<body>
		<div class="demo">简易动画效果</div>
		<div class="demo1">啦啦德玛西亚</div>
	</body>
</html>
crper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3 @keyframes简单动画实现
09-24
主要介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3 keyframes日全食动画特效.zip
10-10
非常实用的特效代码，可以完美运行，可以二次修改！
css3实现动画无限循环
最新发布
qq_58626489的博客
02-23 886
要在CSS3中实现动画的无限循环，你可以使用animation属性和infinite关键字。在上面的示例中，我们首先使用@keyframes声明了一个名为的关键帧动画。然后，在.element类选择器中，通过animation属性将该动画应用到一个元素上。设置2s即动画的时长为2秒，并且使用infinite关键字来表示动画应该无限循环。你可以根据需要调整关键帧的百分比和对应的样式，以创建不同效果的动画。
css3 keyframes日全食动画特效
06-24
css3 keyframes日全食动画特效是一款基于css3 keyframes属性绘制的太阳被月亮遮住日食动画特效。
纯CSS3创意气泡动画特效
07-24
纯CSS3创意气泡动画特效是一款基于css3 keyframes属性绘制的多个圆点气泡随机排列布局动画特效。
HTML5&CSS3网页制作：keyframes.pptx
05-31
HTML5&CSS3网页制作：keyframes.pptx
CSS3动画
Cecilia的博客
12-04 269
@keyframes关键帧的语法： 1.命名以@keyframes开头，后面紧跟着是“动画的名称”，再加上一对花括号“{…}”，括号种就是不同时间段样式规则，即CSS样式。 2.一个@keyframes中的样式规则是由多个百分比构成的，如0%~100%，可以在这个规则中创建更多个百分比，从而让元素达到一种不断变化的效果。（百分号不可省略，否则@keyframes是无效的） 3.可以使用“from”...
@keyframes、transform详解与实例
u011558902的专栏
09-05 2万+
转自文章  https://segmentfault.com/a/1190000004460780#articleHeader5 一、transform 和@keyframes动画的区别： @keyframes动画是循环的，而transform 只执行一遍. 二、@keyframes CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animati
使用html5和css3动画制作网页轮播图效果
weixin_63689594的博客
08-31 1429
动画常用属性 轮播图的制作，html css3 3D动画 轮播图动画制作 ，@keyframes的使用，动画的使用，动画序列和效果展示
CSS弹跳动画效果的实现方法
01-19
这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。 利用伪元素 由于只使用了一个div，要同时达到正方形旋转与阴影缩放的效果，这里必须使用两个伪元素（before与after）来完成，严格来说，虽然只有一个div，但是却是把这个div当作外框，让伪元素before作为旋转的正方形，让伪元素after作为阴影。 .box{ position:relative; } .box:before{ content:''; pos
红包出来-晃动-回去-停顿-循环效果（JS和CSS两种）
Zyl_CN的博客
10-26 1985
纯JS版本： <style> *{ padding: 0; margin: 0; } body { width: 100%; height: 500px; background: #ccc; } ...
【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放
王迪
12-10 4251
需要实现的效果：圆形图片，一直执行旋转的动画，鼠标移上去时，动画停止 实现思路： ①制作一个圆形图片，制作步骤参照：圆形图片的制作 ②创建动画，关键内容：@keyframes 的使用 ③给图片使用动画，关键属性：animation 属性的使用 ④给图片添加 hover 伪类选择器，鼠标移上去时，动画停止，关键属性animation-play-state:paused; 实现代码： <!DOCTYPE html> <html> <head> ..
css动画-animation各个属性详解
weixin_45810135的博客
10-04 1万+
css3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。 一、动画属性： 动画属性包括： ①animation-name， ②animation-duration， ③animation-timing-function， ④animation-delay， ⑤animation-iteration-count， ⑥animation-direction， ⑦animation-fill-mode， ⑧
html div循环加载图片,快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)...
weixin_36057489的博客
06-04 631
问题解说:在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题问题演示//html//less.container {width: 100vw;height: 100%;}.container .first {width: 100vw;height: 100vh;animation: bgmove 10s infin...
javascript来回循环动画
qq_42091922的博客
12-26 779
&lt;script type="text/javascript"&gt; var ss = 0; //计步器 var step = -5; //一步走的像素 var need_step = 60; //半个循环需要走的步数 function $(id) { return document.getElementById(id); } function ba_m...
javascript使用keyframes实现简单动画效果
异想实验室|Arduion|ESP8266|Micro Python|
10-25 1549
本文中代码实现的效果如下，当打开html页面后，点击div设置的颜色块，启动动画，颜色渐变到目标颜色，当动画执行中，点击颜色块，则停止动画，并且恢复最开始状态；修改animation: move ease 2s infinite alternate 中的2s为10s则动画市场为10秒；在前端使用js开发中，可以使用keyframes实现简单的动画效果；
CSS3动画实战之多关键帧实现无限循环动效的时间间隔
weixin_33971205的博客
04-08 2804
题目有点绕，源起最近一个项目中所需的一枚loading图标。SVG+CSS3动画做了那么多，真正应用在项目中的机会少之又少，所以，抓住一切机会，即使loading也不能放过，用系统自带菊花有辱我这一年的修炼。在最后完美做成的过程中，解决了两个问题，第一，是非等粗交叉路径的描边动画实现，第二，是多个拼接动画的无限循环问题，后者困扰了许久，所以，当这个问题解决时，急于分享出来，便于其他的设计师小伙伴遇...
CSS3: calc计算属性
热门推荐
CRPER
04-30 2万+
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；标准的写法： .class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性基本理论 cal
css3无限循环叠纸背景动画特效
08-09
CSS3无限循环叠纸背景动画特效，是一种通过CSS3动画属性和层叠效果实现的独特背景效果。 具体实现该特效的步骤如下： 1. 使用HTML结构创建一个div容器作为背景容器。 2. 在CSS样式中设置该div容器的宽度和高度，以及背景颜色或背景图片。 3. 使用CSS3动画属性@keyframes创建关键帧动画。 4. 在关键帧动画中设置每一帧的属性，包括旋转角度、位置等。 5. 将动画应用于背景容器。 6. 设置动画的循环次数为无限循环。 7. 设置动画的持续时间，调整动画的速度。 8. 添加层叠效果，使得背景容器叠加在其他内容之上。 通过以上步骤，即可实现CSS3无限循环叠纸背景动画特效。 这种特效在网页设计中可以用于各种场景，比如页面加载动画、轮播图切换效果等。它能够吸引用户的注意力，增加页面的视觉效果和交互性，提升用户体验。 此外，通过调整关键帧动画中的属性数值，还可以实现不同的叠纸效果，如翻页、折叠等，做出更加丰富多样的背景动画。 总之，CSS3无限循环叠纸背景动画特效是一种利用CSS3技术实现的独特背景效果，能够为网页增添动感与创意，是网页设计中常用的动画效果之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

crper

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值