对于Web前端动画是一种提高表现力的方式,CSS中提供了几富有表现力的动画属性,他们特性不同,这里把常用的属性列出来。

CSS中与动画相关的属性:

transform是一个控制形变的属性,本身不会产生运动的效果。

/* 默认值 */
transform: none;

/* 函数值 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); /* 矩阵变换 */
transform: translate(12px, 50%); /* 位移 */
transform: translateX(2em); /* X轴平移 */
transform: translateY(3in); /* Y轴平移 */
transform: scale(2, 0.5); /* 缩放 */
transform: scaleX(2); /* X轴缩放 */
transform: scaleY(0.5); /* Y轴缩放 */
transform: rotate(0.5turn); /* 旋转 */
transform: skew(30deg, 20deg); /* 倾斜 */
transform: skewX(30deg); /*  */
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

transition是控制过渡的效果

transitionCSS属性是一个简写属性,用于transition-property,transition-duration,transition-timing-function 和 transition-delay。

transition-property: all;
transition-duration: 2s;
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear;
transition-delay: 2s;

特别的,对于更改display: none属性的元素立即应用transition是无效的,需要设置setTimeout等待几毫秒。

animation是真正的动画属性,需要配合关键帧@keyframes使用。

CSS animation属性是如下属性的一个简写属性形式: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, 和 animation-play-state.

animation-name: keyframes;
animation-duration: 2s|2ms;
animation-timing-function: ease|ease-in|ease-out|ease-in-out|linear;
animation-delay: 2s|2ms;
animation-iteration-count: 2|2.5|infinite;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-fill-mode: none | forwards | backwards | both;
animation-play-state: running | paused;

@keyframes 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这比transform更能控制动画序列的中间步骤。

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

可动画属性列表列出了所有可以使用动画控制的属性。

值的注意的是animation所有属性都支持多个值用逗号分隔,表示多个动画效果叠加的属性,使用delay可以达到连续播放两种keyframes动画的效果。

使用js让动画重新播放可能是个问题,唯一的方法就清除动画相关的CSS然后让等待一段时间再添加上去。问题是什么时候添加上去是有效的?需要等待浏览器重绘之后。

function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}
原文链接:https://marskid.net/2019/04/18/css-svg-love-tree/