css3动画animation

最新推荐文章于 2024-05-28 10:56:55 发布

chijiangwo8270

最新推荐文章于 2024-05-28 10:56:55 发布

阅读量169

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2425353/blog/3081773

版权

1.@keyframes 动画规则的定义

语法 @keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值：0-100%; from（与 0% 相同）; to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

2.animation 动画申明

语法 animation: name duration timing-function delay iteration-count direction;
默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="mymove 5s infinite"

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。（必须赋值）
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-timing-function：类型

值	描述
linear	动画从头到尾的速度是相同的
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
infinite	一直跑动画

3、实现一个圆圈放大的动画效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	@keyframes testname {
	  from {transform: scale(0);}
	  to {transform: scale(1);}
	}
	.test{
		animation: testname 1.5s infinite;
		background-color: aquamarine;
		width: 20px;
		height:20px;
		border-radius: 50%;
	}
</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>

4.多个这样的圆圈可以做成一个动态加载的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	@keyframes testname {
	  from {transform: scale(1);}
	  75% {transform: scale(0);}
	}
	.test{
		animation: testname 1.5s infinite;
		background-color: aquamarine;
		width: 20px;
		height:20px;
		border-radius: 50%;
		float: left;
		margin-left: 10px;
	}
	.two{
		 animation-delay: 0.25s;
	}
	.three{
		 animation-delay: 0.5s;
	}
</style>
</head>
<body>
	<div class="test"></div>
	<div class="test two"></div>
	<div class="test three"></div>
</body>
</html>

效果图：