transition、transform、animation

transition-过渡

元素属性的过渡效果，通常配合hover实现元素初始样式到hover中样式的过渡，语法如下：

transition: property duration timing-function delay

property：属性，可以写all
duration：持续时间
timing-function：变化的曲线
delay：延迟

div{width: 200px;height: 50px;background-color: aqua;transition: width 3s}
div:hover{width: 300px;}

transform-转换

2D转换有元素旋转(rotate)，缩放(scale)，移动(translate)

1 transform: rotate(45deg);  /*旋转的单位为deg*/
2 transform: scale(1.2);  /*缩放的倍数，1是原始大小*/
3 transform: translate(20px, 20px);  /*水平和垂直方向移动的数值，移动的单位可以为像素或者百分比，特别注意以百分比为单位时是相对于自身的百分比*/
4 transform：skew；/*倾斜*/

animation-动画

首先使用 @keyframes 来声明动画。

@keyframes run {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(200px);
        }
      }
      @keyframes bgc {
        0% {
        }
        50% {
          background-color: #ff4500;
        }
        100% {
          background-color: #ffb90f;
        }
      }
      @keyframes rotateAnimation {
        0% {
        }
        100% {
          transform: rotate(360deg);
        }
      }

.box3{width: 100px;height: 100px;background-color: #90ee90;animation-name: run, bgc;animation-duration: 2s;}
.box3:hover {animation: rotateAnimation 0.2s infinite linear;}