Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >css动画无限循环

css动画无限循环

原创
作者头像
IT工作者
发布于 2022-02-15 09:25:34
发布于 2022-02-15 09:25:34
6.7K00
代码可运行
举报
文章被收录于专栏:程序技术知识程序技术知识
运行总次数:0
代码可运行

想要实现CSS动画的无限循环,其实主要就是要使用animation-iteration-count这个属性,将其设置为infinite,动画就会一直循环播放。

栗子

CSS动画效果无限循环放大缩小

HTML:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image>

CSS:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
	.anima {
		animation-name: likes; // 动画名称
		animation-direction: alternate; // 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
		animation-timing-function: linear; // 动画执行方式,linear:匀速;ease:先慢再快后慢;ease-in:由慢速开始;ease-out:由慢速结束;ease-in-out:由慢速开始和结束;
		animation-delay: 0s; // 动画延迟时间
		animation-iteration-count: infinite; //  动画播放次数,infinite:一直播放
		animation-duration: 1s; // 动画完成时间
	}

	@keyframes likes {
		 0%{
		      transform: scale(1);
		   }
		   25%{
		      transform: scale(0.9);
		   }
		   50%{
		      transform: scale(0.85);
		   }
		   75%{
		      transform: scale(0.9);
		   }
		   100%{
		      transform: scale(1);
		   }

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
CSS3动画属性 animation详解(看完就会)
轮播图swiper框架的基本使用 【Transform3D】转换详解(看完就会) 【css动画】移动的小车
坚毅的小解同志的前端社区
2022/11/28
1.1K0
CSS3动画属性 animation详解(看完就会)
–探索CSS3动画、过渡
###让我们一起来探索 Transiton(过渡), Transform(变化) , Animation(动画)属性吧! ---- ###Transiton(过渡) transition 属性简写: transition: property(过渡的css属性) duration(持续时间) timing-function(过渡类型) delay(延迟过渡时间); 默认值: transition:all 0 ease 0 详细属性值: transition-property : //设置过渡效果的 CS
大象无痕
2018/07/17
8640
动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
星辰_大海
2020/09/30
1K0
CSS3动画,为你带来极致的视觉体验!
HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究其原因在于CSS3的性能会比JS的性能来的好,并且CSS3动画为用户带来了强大而又震撼的效果,为开发者带来了简单的书写方式。 本文主要内容 1、前言 2、实现动画的前奏 3、CSS3动画的语法 4、实例解析 5、总结 1、前言 CSS3属性中有关于制作动画的三个属性:Transform、Transition、Animation;之前一起学习了Tran
HTML5学堂
2018/03/13
1.4K0
CSS3动画,为你带来极致的视觉体验!
CSS3 动画属性
CSS3 动画 虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态, 模拟一种过渡动画效果,但它的功能是非常有限的。 因此,CSS3 新增了一个动画属性animation。与过渡属性transition属性不同的是,CSS3 的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步, 实现更为复杂的动画效果。 CSS3中通过animation实现动画和transition实现动画非常类似,都是通过改变元素的属性值来实现动画效果的。 它们的区别主要在于:使用 transition属性只能通过指定属性的初始状态和结束状态,然后在两个状态之间进行平滑过渡的方式来实现动画。 而animation实现动画效果主要由两个部分组成: 1). 通过类似Flash动画中的关键帧来声明一个动画; 2). 在animation属性中调用关键帧声明的动画,从而实现一个更为复杂的动画效果。 CSS3动画属性animation和CSS3的transition属性一样是一个复合属性,它包含了8个属性: animation-name,主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画, 从而执行动画。 animation-duration,主要用来设置动画播放所需时间,一般以秒为单位。 animation-timing- function主要用来设置动画的播放方式,与transition-timing-function类似。 http:/ /www.iis7.com/b/wzjk/ animation-delay、主要用来指定动画开始时间,一般以秒为单位。 animation-iteration- count、主要用来指定动画播放的循环次数。 animation-direction、主要用来指定动画的播放方向。 animation-play- state,主要用来控制动画的播放状态。 animation-fill- mode,主要用来设置动画的时间外属性。br/>:关键帧 在CSS3中,把@keyframes称为关键帧 @keyframes 的作用: transition制作一个简单的动画效果时,包括了元素的初始属性和最终属性,一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率, 其实这些值都是一个中间值,如果要控制得更细一些,比如说要第一个时间段执行什么动作,第二个时间段执行什么动作(换到Flash制作动画中来说,就是第一帧要执行什么动作,第二帧执行什么动作), 这样用transition 就很难实现了,此时也需要一个“ 关键 帧”来控制。 在CSS3中就是通过@keyframes属性来实现这样的效果的。br/>@keyframes的语法: @keyframes具有其自己的语法规则,命名是由@keyframes开头,后面紧跟着是“动画的名称”加上一对花括号“{...}”,括号中就不同时间段样式规则,有点像CSS的样式写法。一个@keyframes中的样式规则是由多个百分比构成的,如0%~100%,可以在这个规则中创建更多个百分比,分别给每个百分比中需要有动画效果的元素加上不同的属性,从而让元素达到一种不断变化的效果,比如说移动,再比如改变元素颜色、位置、大小和形状等。 不过有一点需要注意, 可以使用“ frome”“to”代表一个动画是从哪开始,到哪结束,也就是说from就相当于0%,而to相当于100%。值得说的是,0%不能像别的属性取值一样把百分比符号省略,在这里必须加上百分符号(%)。如果没有加上,这个@keyframes是无效的,不起任何作用。因为@keyframes的单位只接受百分比值。@keyframes可以指定任何顺序排列来决定animation动画变化的关键位置 CSS中为元素应用动画: 要在CSS中为元素应用动画, 首先要创建一个已命名的动画,然后将它附加到该元素属性声明块中的一个元素上。 动画本身并不执行任何操作; 为了向元素应用动画,需要将动画与元素关联起来。这个要创建的动画,必须使用@keyframes来声明(或者对于当前的Webkit实现,使用@-webkit-keyframes),后跟所选择的名称,该名称主要用于对动画的声明作用,然后指定关键帧。 :CSS3动画8个子属性详解
py3study
2020/01/08
1.3K0
CSS3 (animation)
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
py3study
2020/01/09
6650
CSS3 (animation)
从Loading动画示例学习CSS3动画基础
以前说页面是动态,基本都是说数据是从数据库查询的,不是写死在html代码里面的。现在的说页面动态,一般会问:你是说数据,还是效果动态?
Javanx
2019/09/04
8390
从Loading动画示例学习CSS3动画基础
CSS3 动画 animation
复习下 css3 的动画, 都快不会写了,那会儿挺喜欢 flash 的,可惜了时代在前进。写这里就当是文档看吧
chuchur
2022/10/25
5640
CSS3 动画 animation
CSS进阶-CSS动画关键帧
CSS动画关键帧(@keyframes)是CSS动画的核心,它允许开发者定义一个动画序列中的多个样式阶段,从而实现细腻、可控的动画效果。掌握关键帧动画不仅能够提升网页的交互性和美观度,还是现代Web开发不可或缺的技能之一。本文将深入浅出地介绍CSS动画关键帧的使用方法,探讨在实际应用中常见的问题、易错点以及如何避免这些问题,并提供实用的代码示例。
Jimaks
2024/06/16
2600
CSS进阶-CSS动画关键帧
CSS3的变形transform、过渡transition、动画animation学习
变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作
书童小二
2018/09/03
3.5K0
玩转CSS3动画
因公司业务需要在Android WebView上增加对CSS3动画的支持,所以就先研究了一下CSS Animations。这篇文章主要站在前端开发人员的角度,试图阐述什么是CSS动画、包含哪些关键要素以及如何编写代码实现动画。先把这些捋清楚了,才好去考虑如何实现。
云水木石
2019/07/01
8020
玩转CSS3动画
CSS-2D-3D转换
转换在CSS3中可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果
小城故事
2023/02/27
6680
【前端】CSS3动画详解
在 CSS3 时代到来之前,网页中的动画通常通过 JavaScript 动态地改变元素的样式属性来实现。这种实现方式虽有效,但性能往往欠佳,特别是在复杂动画中显得效率低下。CSS3 的引入使得动画的实现更加简单,同时显著提高了性能和流畅性。
CSDN-Z
2025/06/01
1390
【前端】CSS3动画详解
「HTML&CSS」第二部分
请注意,本文编写于 2106 天前,最后修改于 174 天前,其中某些信息可能已经过时。
曼亚灿
2023/05/17
2650
「HTML&CSS」第二部分
CSS动画简介
现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。 本文介绍CSS动画的两大组成部分:transition和animation。我不打算给出
ruanyf
2018/04/13
1.5K0
CSS动画简介
彻底了解CSS3帧动画
animation-name 可以指定多个值,每个用 , 隔开,多个值表明有多个帧动画。
多云转晴
2020/06/28
1.1K0
css教程之动画与变换
skew() 斜切扭曲,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
老雷PHP全栈开发
2020/07/02
5170
使用css3如何实现一个文字打印效果
animation动画通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果;
itclanCoder
2023/09/14
3250
使用css3如何实现一个文字打印效果
【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )
在 @keyframes 定义的动画中 , 可以设置一系列的 CSS 属性 , 用于控制动画的运行 , 常见的属性如下 : ( 下面的动画属性是设置在 执行动画 的 标签元素 样式中的 )
韩曙亮
2023/10/15
8220
【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )
2019年了,你还不会CSS动画?
今年我面试了很多同学,只要看到简历上写“熟练掌握CSS3”的,我都会问问动画相关知识。然而我发现:都 2019 年了,还有很多同学不会 CSS 动画。
Nealyang
2019/11/04
5320
相关推荐
CSS3动画属性 animation详解(看完就会)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档