css @keyframes配合animation 简单动画效果

1.animation

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

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

属性	可选值	描述
animation-name		规定需要绑定到选择器的 keyframe 名称
animation-duration		规定完成动画所花费的时间
animation-timing-function	linear | ease | ease-in | ease-out | ease-in-out	规定动画的速度曲线
animation-delay		规定在动画开始之前的延迟
animation-iteration-count		规定动画应该播放的次数
animation-direction	normal | reverse | alternate | alternate-reverse	规定是否应该轮流反向播放动画

---

2.keyframes 关键帧

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

<div class="box"></div>

渐隐渐现效果：

.box {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: pink;
	animation: shadow 1s linear infinite alternate;
}

@keyframes shadow {
	0% {
		opacity:0;
	}
	100% {
		opacity: 1;
	}
}

---

移动效果：

.arrow {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 25px;
	left: 50%;
	margin-left: -11px;
	border: 3px solid transparent;
	border-top: 3px solid #000;
	border-left: 3px solid #000;
	z-index: 99;
	opacity: .8;
	transform: rotate(45deg);
	animation: arrow 1.5s ease-in-out infinite;
}
          
@keyframes arrow {
	0% {
		opacity:0;
		transform:translate(0, 0px) rotate(45deg)
	}
	50% {
		opacity:1;
		transform:translate(0, -5px) rotate(45deg)
	}
	00% {
		opacity:0;
		transform:translate(0, -10px) rotate(45deg)
	}
}