@keyframes 创建属于你的动画

开发工具与关键技术：
作者：咕哒咕哒giao
撰写时间：2019年2月 18日

@keyframes是css3里的一个创建动画的属性，通过@keyframes你可以创建自己想要的动画，我写个实例来演示一下吧。

.bool{ height: 50px; width: 50px; border-radius: 50%; background: #D619E1; animation: animation 0.6s ease infinite; }  相关属性已经写好了接下来我们来创建动画，让这个球球动起来吧。 @keyframes animation{ 0%{ margin-top: 0%; margin-left: 0%; }

50%{
	margin-top: 16%;
	margin-left: 16%;
}
100%{
	margin-top: 0%;
	margin-left: 0%;
}

}

0%是开头动画，100%是结束动画，我还给了一个ease属性，让它有一个先慢后快的一个动画过渡过程。大功告成，这样他就可以自己动啦，是不是操作起来非常的容易呢！