CSS3动画animation

        animation和上次说的transform动画有点不同,需要进行定义动画规则,而animation则无需受体,自动执行动画,translation则需要某个动作执行才进行动画!

下面看一个animation参数

animation: run 3s linear 0.5s infinite;

第一个参数是这个运动的规则,第二个指定该运动的执行时间 第三个参数指定运动曲线(linear匀速)

第四个是一个完整动作执行完毕后延时(暂停时间),infinite(重复)动画是否重复;

一般只需要指定动画规则和运动时间这个动画就可以正常执行!

上面指定了一个正常的animation,下面当然要设置运动规则

@keyframes run{
				0%{
					width:300px;
				}
				30%{
					width:600px;
				}60%{
					width:900px;
				}
				80%{
					width:600px;
				}
				100%{
					width:300px;
				}
			}

@keyframes是执行规则定制开头,第二个run是在animation时候定义的动画规则名字

上述指定了run的规则从0%到100%,这个过程实质上是整个运动时间的百分比,还有下面一种方式定义规则

@keyframes run{
				form{
				}
				to{
				}
			}

form开始时候状态,to结束时候状态

animation还有一个参数alternate(反转):正向完成一个动画后则反向继续运动.一个动画从0%到100%执行一次,100%到0%过程(则为反转alternate)

如果指定alternate(反转)则第1,3,5,7...奇数次运动则为顺时针(正向),2,4,6,8,10...偶数次运动则为逆时针(反向)

看一下转盘选择demo实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animetation大转盘</title>
		<style>
			img{
				width:550px;
				height:550px;
				border: 10px solid #a66ffa;
				margin:200px auto;
				border-radius:50%;
				display: block;
				
				animation: run 5s linear infinite;
				 /*alternate 反转(逆时针)*/
				
			}
			img:hover{
				animation-play-state:paused ;
			}
		/*定义运动规则*/
		@keyframes run{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
		</style>
	</head>
	<body>
	<img src="http://i.niupic.com/images/2018/03/11/vivSSI.jpg" alt="" />
	</body>
</html>

 这个demo可能会发现一个新的属性animation-play-state:paused;这个这指定了animation的动画暂停!

    animation更多属性参考w3c规则常用属性大概就这么些!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

Flutte部件目录-基本部件(一)

一个容器首先用padding包围子组件(由decoration中出现的所有边框填满),然后将附加constraints应用于填充范围(将width和height...

44920
来自专栏阿凯的Excel

动态显示下拉框内容

过了冬至,你在北方瑟瑟发抖,我在广东秋风瑟瑟~ 最近小编经常梦回母校~放一张母校的美图! 年底了,又到了预订报刊的时候! 肯定有人会问,这年头还有谁看报刊...

31230
来自专栏菩提树下的杨过

silverlight中"制作逐帧动画"/"播放gif"收集

“逐帧动画”与“播放GIF”貌似二个风马牛不相干的问题,其实不然! 因为silverlight中的image控件不支持直接把gif动画做为source,所以象做...

22970
来自专栏Windows Community

New UWP Community Toolkit - RangeSelector

概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 RangeSelect...

36970
来自专栏牛客网

新鲜出炉的百度-春招-前端面经

1. 自我介绍 2. 项目经验,我说项目名说错了,然后又说了一遍,面试官不知道什么心态的鬼魅一下 3. Html5不同于以前版本的特点 4. Html5新增ap...

390110
来自专栏Android群英传

Android Vector曲折的兼容之路

25430
来自专栏阿凯的Excel

让你的Excel表动起来!!!

本次是第二次分享广大网友向我提问的经典问题。 本周问题,利用名称管理器完成二维表的匹配返回!让你的表格动起来! 话说!本次解决方案相对复杂,能看明白并且自己会...

31440
来自专栏王磊的博客

jQuery 计时器(jquery timers)简单应用

jquery timers 代码(版本1.2): /** * jQuery.timers - Timer abstractions for jQuery *...

31930
来自专栏Nian糕的私人厨房

《精通CSS:高级Web标准解决方案》 知识点汇总

本篇的内容到这里就全部结束了,常用的 CSS 样式重置文件我已经发到了 GitHub Reset.css,本篇文章知识点来源 精通CSS:高级Web标准解决方案...

13330
来自专栏章鱼的慢慢技术路

通过C#脚本实现旋转的立方体

18430

扫码关注云+社区

领取腾讯云代金券