css3雷达动画解析--animation和@keyframe

Olliverzhang

于 2020-06-18 09:55:15 发布

阅读量485

点赞数

分类专栏：实习日记文章标签： css css3

本文链接：https://blog.youkuaiyun.com/Olliverzhang/article/details/106802778

版权

15 篇文章

订阅专栏

本文深入解析CSS3雷达动画的工作原理，通过分析`animation`和`@keyframes`属性，阐述如何创建和控制动画效果。文章以实例代码为基础，帮助读者理解这两个关键属性如何定义及实现动画的起始和结束状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前段事件用到一个radar的动画，当时从网上找的现有的动画，今天正好有时间，好好理解下里面的原理。

动画代码如下：

如图，主要用到的有animation和@keyframes两个属性。

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

代码示例解释：animation:animation-name animation-duration animation-delay;
相关的参数

@keyframes
@keyframes在菜鸟教程上的示例和语法如下图所示，有一些抽象，我结合radar图自己的理解就是，@keyframes是一种记录animation初始状态和结束状态的属性，标记动画开始和结束时的位置，css样式等。

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

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