时间戳

首页 > 技术文章 > animation & @keyframes 实现loading效果

animation & @keyframes 实现loading效果

fanyx 2016-10-19 15:58 原文

效果图截图如下：

直接上代码：

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3实现loading效果</title>
	<link rel="stylesheet" type="text/css" href="css3-loading.css">
</head>
<body>
	<div class="loading-box">
		<div class="loading"></div>
		<p class="font">Loading</p>
	</div>
</body>
</html>

css

.loading-box{
	width: 200px;
	height: 200px;
	position: relative;
	margin: 100px auto 0 auto;
}
.font{
	width: 100%;
	height: 40px;
	font-size: 20px;
	font-family: Arial;
	position: absolute;
	text-align: center;
	line-height: 40px;
	left: 0;
	top: 50%;
	margin-top: -20px;
	color: green;
}
.loading{
	width: 170px;
	height: 170px;
	margin: 10px auto 10px auto;
	border-radius: 100%;
	border-left:10px solid #eeeeee; 
	border-bottom:10px solid #eeeeee; 
	border-right:10px solid green; 
	border-top:10px solid green; 
	-webkit-animation: loading .6s infinite linear;
	-moz-animation: loading .6s infinite linear;
	-ms-animation: loading .6s infinite linear;
	-o-animation: loading .6s infinite linear;
	animation: loading .6s infinite linear;
}
@keyframes "loading" {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(359deg);
   	-moz-transform: rotate(359deg);
   	-o-transform: rotate(359deg);
   	-ms-transform: rotate(359deg);
   	transform: rotate(359deg);
 }

}

@-moz-keyframes loading {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-webkit-keyframes "loading" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-ms-keyframes "loading" {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

@-o-keyframes "loading" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(359deg);
   transform: rotate(359deg);
 }

}

animation

语法


animation: name duration timing-function delay iteration-count direction;

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • 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 ：动画以低速开始和结束。
  • cubic-bezier(n,n,n,n) ：在cubic-bezier函数中自己的值。该值是从0到1的数值。

兼容性

  • IE10及Firefox、Opera支持animation属性。
  • Safari和Chrome支持替代的-webkit-animation属性。
  • IE9及其以下版本不支持animation属性。

请始终规定animation-duration属性，否则时长为0，就不会播放动画了。

@keyframes

语法

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

定义和用法

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

兼容性

  • 目前浏览器都不支持 @keyframes 规则。
  • Firefox 支持替代的 @-moz-keyframes 规则。
  • Opera 支持替代的 @-o-keyframes 规则。
  • Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

推荐阅读