SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处，SVG元素不能使用box model来管理，因此，它没有margin、padding、border或content boxes。
默认情况下，一个HTML元素的transform原点位于该元素的(50%, 50%)的地方，这里是元素的中心点。与之不同，SVG元素的transform原点位于当前用户坐标系统的原点上，这个点是画布的左上角位置。
假设我们有一个<div>和一个SVG <rect>元素：
<!DOCTYPE html>
原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。
body > div > div:after {content: ""
position: absolute
top: -5px
box-shadow: 0 0 12px #fff
left: 50%
margin-left: -5px
width: 5px
height: 5px
border-radius: 50%
background-color: #fff
-webkit-animation: particle_ 2s infinite linear
animation: particle_ 2s infinite linear
} body > div:nth-of-type(4) > div, body > div:nth-of-type(4) > div:after {
-webkit-animation-delay: -1.5s
animation-delay: -1.5s
}
body > div > div {
width: 200px
height: 200px
position: relative
-webkit-transform-style: preserve-3d
-webkit-animation: trail_ 2s infinite linear
transform-style: preserve-3d
animation: trail_ 2s infinite linear
}
实施步骤：
建立一个BOX
在BOX中制作一个元素。
CSS动画定义BOX旋转按照你的轨迹。
通过。
-webkit-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
-moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
-o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
来定义旋转方向，0是不旋转。0-360度是一圈。
-webkit-transition:transform 1s
transition:transform 1s
这是设置动画时间。
一个BOX完成后，复制box，摆在统一中心点后，设置Z轴的数字。
