css中支持动画的有哪些

CSS是网页设计中不可缺少的一部分，它可以为网页添加各种样式特效，其中动画效果最受欢迎。以下是CSS中支持动画的主要方式：

  1. Transitions（过渡效果）：可以逐步改变CSS属性的值，从而产生平滑的过渡效果。语法如下：
    .element{
       transition: property duration timing-function delay;
    }
 
  2. Animations（关键帧动画）：可以通过指定关键帧来制定CSS动画。这使得动画变得更加灵活、复杂和有趣。语法如下：
    .element{
       animation: name duration timing-function delay iteration-count direction;
    }

  3. Transformations（变形效果）：可以通过修改元素的形状、大小、位置甚至透明度来制作动画效果。语法如下：
    .element{
        transform: translate(x,y) rotate(deg) scale(x,y) skewX(deg) skewY(deg) matrix(n,n,n);
    }

  4. Gradient Animations（渐变动画效果）：可以通过改变渐变颜色的方向、颜色停止点的位置和颜色的透明度来实现动画效果。语法如下：
    .element{
        background: linear-gradient(direction,color-stop1,color-stop2,...);
        background: radial-gradient(shape size at position,start-color,...,last-color);
    }

  5. Scroll Animations（滚动动画效果）：可以通过滚动网页时改变元素的位置和透明度来实现动画效果。语法如下：
    .element{
        position: fixed;
        opacity: 0;
    }
 

综上所述，上述的CSS支持动画的方式都有各自的特点和优势，设计师可以根据具体的需求来选择最合适的方式。