css渐变动画

.div1{
            /* 线性渐变 */
            /* background: linear-gradient(red,yellow,blue); */
            /* background: linear-gradient(to right,red,yellow,blue); */
            /* background: linear-gradient(to right bottom,red 20%,yellow 60%,blue ); */
            background: linear-gradient(10deg,red,yellow,blue);
            /* 平铺 */
            /* background: repeating-linear-gradient(30deg,red 20px,yellow 40px); */
            
        }
        .div2{
            /* 径向渐变 */
            /* background: radial-gradient(red,yellow,blue); */
            /* background: radial-gradient(circle,red,yellow,blue); */
            /* background: radial-gradient(circle at top left,red,yellow,blue); */
            /* background: repeating-radial-gradient(circle at top,red 40px,yellow 60px); */
        }



  /* 平移 translate
                第一个值是 横向偏移量
                第二个值是 纵向偏移量
            */

  

  .div2:hover{
            /* 旋转 角度的单位*/
            transform: rotate(-30deg);
            background-color: aqua;
        }
        .div3:hover{
            /* 缩放 默认值是 1 小于1就是缩小，大于1 就是放大  */
            /* transform: scale(0.6); */
            background-color: aquamarine;
            /* 改变位置 
            top left bottom right center 
            两两组合使用
            */


     /* 倾斜 */
            /* transform: skew(-30deg); */



        /* 关键帧 */
        @keyframes name {
        }


        <!-- 平移之后占位状态不变 -->


          /* 
                过渡：
                第一个值是属性 一般是all，也可以是其他属性名称
                第二个值是时间 单位是时间单位 通常是s  
                第三个值是 过渡速度 linear 匀速

                可以只写时间，其他两个值默认填充 all 和 linear
            */
            transition: all 2s linear;