css动画无限循环转圈,css实现无限循环

动画，在css中可以通过transition、animation来完成。

比如我要实现一个按钮在渲染后500ms，完成一个旋转90°的动画，动画持续时长为2s。

1.使用transition完成

Button {

width: 100px;

height: 30px;

margin-left: 30px;

color: #333;

vertical-align: middle;

text-align: center;

border: none;

outline: none;

transform-origin: 0 0;

transform: rotate(0deg);

}

.rotate180-transition {

transition: transform 2s ease-out 500ms;

}

Button:hover {

transform: rotate(90deg);

}

2.使用animation实现

.rotate180-animation {

animation: my-animation 2s ease-out 500ms 2;

}

@keyframes my-animation{

0% {

transform: rotate(0deg);

}

10% {

transform: rotate(10deg);

}

20% {

transform: rotate(20deg);

}

30% {

transform: rotate(30deg);

}

40% {

transform: rotate(40deg);

}

50% {

transform: rotate(50deg);

}

60% {

transform: rotate(60deg);

}

70% {

transform: rotate(70deg);

}

80% {

transform: rotate(80deg);

}

90% {

transform: rotate(90deg);

}

如果要实现无限动画只要修改animation的循环次数为infinite就可以了

css动画无限循环转圈,css实现无限循环相关推荐

js写css字体,js如何写出css动画？js写css动画的方法（代码）
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
Vue07---vue中的css动画原理及animate.css使用
目录一.transition过渡动画原理二.使用keyframes关键帧三.在vue中使用animate.css 同时使用过渡和动画一.transition过渡动画原理当元素被transit ...
css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放！
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
css 动画重播,javascript – Animate.CSS重播？
我有一个使用Animate.CSS的动画,如果用户愿意,我想重播,但我尝试的不起作用.这是代码: HTML: Replay JS: var $j = jQuery.noConflict(); $j(& ...
css动画无限循环转圈,css3 – 具有无限循环的链CSS动画
简而言之,没有(一些可以解决的问题) 你的行动画计数:infinte当前正在做的是元素:动画:ani1 3s 0s无限,ani2 3s 9s无限;因此,由于声明的第一个动画的迭代次数为无限,因此永远不 ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
html盒子移动动画代码,详解盒子端CSS动画性能提升
流畅动画的标准理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms. ...

css动画无限循环转圈,css实现无限循环

css动画无限循环转圈,css实现无限循环相关推荐

最新文章

热门文章