使用css animation动画做边框闪动效果
在拖拽div节点时，给div节点添加diagramTop-item-click样式，使用css animation动画0.5秒执行一次。
css样式
.diagramTop-item {
width: 102px;
height: 32px;
background-color: #0e141f;
border: 1px solid #090d14;
box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
border-radius: 6px;
.diagramTop-item-click {
border: 1px solid #379ffe;
box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
animation: mymove 0.5s infinite;
-webkit-animation: mymove 0.5s infinite;
@keyframes mymove {
from {
border: 1px solid #379ffe;
box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
border: 1px solid #090d14;
box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
@-webkit-keyframes mymove {
from {
border: 1px solid #379ffe;
box-shadow: 0px 0px 7px 2px rgb(55 159 254 / 80%);
border: 1px solid #090d14;
box-shadow: 0px 1px 0px 0px rgba(9, 13, 20, 1);
使用css animation动画做闪动效果在拖拽div节点时，给div节点添加diagramTop-item-click样式，使用css animation动画0.5秒执行一次。css样式.diagramTop-item { width: 102px; height: 32px; background-color: #0e141f; border: 1px solid #090d14; box-shadow: 0px 1px 0px 0px rgba(9, 1
css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习
animation属性一览
因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了
使用animation实现逐帧动画
熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：
CSS Code复制内容到剪贴板
2.box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
css3: 属性值–*水平阴影的位置，*垂直阴影的位置，模糊距离，阴影的大小，阴影的颜色，从外侧阴影改变内侧阴影`
四周阴影的示例：
3.box-sizing
box-sizing: content-box|border-box|inherit:
.animation-flash {
animation: myfirst 0.5s linear;
-webkit-animation: myfirst 0.5s linear;
animation-iteration-count: infinite;
<head>
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
border-color: #393;
box-shadow: 0 0 5px rgba(0,25...
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;
&amp;amp;lt;html&amp;amp;gt;
&amp;amp;lt;head&amp;amp;gt;
&amp;amp;lt;meta http-equiv=&amp;quot;Content-Type&am
CSS Animation 动画是一种通过 CSS 属性实现一些简单或复杂动画效果的技术。它可以通过 keyframes、transitions 或者 transform 达到各种想要的动画效果。随着时间的推移，CSS Animation 技术变得越来越流行，因为它不再需要使用 JavaScript 或其他动画库来实现动画效果。
CSS Animation 动画完成后，新动画的实现可以通过继续操作已有动画的属性，或者组合使用不同属性来实现。比如可以通过对既有的 transform 动画进行新的 transform 特效进一步扩展，也可以通过添加新的 keyframes 和 transition 时间线来生成更加有趣的动画效果。
同时，借助 CSS3 的 transform 和 transition 属性，可以实现更加复杂的动画。通过调整元素的旋转、缩放、移动、倾斜、透明度和过渡动画等，实现更多元化的变化效果。
总之，CSS Animation 技术是 Web 开发中不可或缺的一部分，可以用来实现简单的动画效果和交互效果，可以用在各种网站设计中，提高用户体验，增加网站的吸引力。
