css不用animate如何做动画

CSS是一种非常有用的前端技术，可以用来实现页面的样式和动画效果。其中，动画效果在页面中常常扮演着重要的角色。在许多情况下，我们可以直接使用CSS的animate属性来创建动画效果。然而，在某些场景下，由于个人喜好或者特殊需求，我们不想使用animate属性来实现动画效果，那么该如何操作呢？下面我们就来介绍一些不用animate属性来实现动画的方法。

1. 使用transition

 .box{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: all 1s;
  }

  .box:hover{
    width: 200px;
    height: 200px;
  } 

上面这段代码中，我们使用了transition属性来实现当鼠标悬浮在盒子上时，盒子会变得更大。transition属性可以让元素的某些属性（比如width、height等）在一段时间内逐渐变化，从而形成动画效果。

2. 使用transform

 .box{
    width: 100px;
    height: 100px;
    background-color: red;
    transform: scale(1);
    transition: all 1s;
  }

  .box:hover{
    transform: scale(2);
  } 

与transition属性相似，transform属性也可以用来实现动画效果。我们可以使用scale(x)函数来控制元素的大小，rotate(x)来旋转元素，translate(x, y)来移动元素等等。例如上面这段代码，我们实现了当鼠标悬浮在盒子上时，盒子会变得更大的效果，但与transition不同的是，transform属性不会改变元素的宽高等属性，而是更改元素的形状。

3. 使用@keyframes

 .box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: bigger 1s forwards;
  }

  @keyframes bigger{
    from{
      width: 100px;
      height: 100px;
    }
    to{
      width: 200px;
      height: 200px;
    }
  } 

除了使用transition和transform属性外，我们还可以使用@keyframes来制作动画效果。@keyframes可以让我们在关键帧上设置元素的属性，从而给元素带来动画效果。例如上面这段代码，我们实现了当鼠标悬浮在盒子上时，盒子会变得更大的效果。@keyframes与transition不同的是，它可以实现更加复杂的动画效果。

总结

以上就是三种不用animate属性来实现动画的方法。当然，这些方法仅仅只是让我们熟悉css动画的一些基础知识，并不能涵盖全部应用场景。学习css动画，还需要不断地尝试，不断地创新，才能实现更好更有趣的动画效果。