css(transition,transform,animati

/* 
    ==>transform
        rotate(angle)旋转
        translate(x,y)移动
        scale(x,y)缩放
        skew()倾斜旋转

        设置基地点
        transform-origin:;
*/
@keyframes Rota {
    from{
        // transform:rotate(0deg);
        transform:skewY(0);
    }
    to{
        // transform:rotate(360deg) scale(1.2,1.2) translate(20px,20px);
        transform:skewY(60deg);
    }
}
.transForm{
    margin-top: 100px;
    margin-left: 100px;
    .box-4{
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background: linear-gradient(red,green);
        animation: Rota 3s linear infinite;
    }
}

/* 
    transition-property:规定设置过渡效果的 CSS 属性的名称。
    transition-duration:规定完成过渡效果需要多少秒或毫秒。
    transition-timing-functionL:规定速度效果的速度曲线。
    transition-delay:定义过渡效果何时开始。
 */
 .transiton-box{
     width: 200px;
     height: 200px;
     background: red;
     transition:height 2s linear 2s ;
     &:hover{
         height: 400px;
     }
 }

@charset "UTF-8";
/* 
animation-name:规定需要绑定到选择器的 keyframe 名称。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:    规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。infinite无限播放
animation-play-state:running;//paused 停止动画
animation-fill-mode:forwards;//属性规定动画在播放之前或之后，其动画效果是否可见。

简写

 animation: name duration timing-function delay iteration-count direction;
  animation: mymove-1 5s linear 2s 3 linear;
 */
@keyframes mymove-1 {
  0% {
    top: 0px;
  }
  25% {
    top: 200px;
  }
  50% {
    top: 100px;
  }
  75% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}

@keyframes mymove-2 {
  from {
    left: 0px;
  }
  to {
    left: 200px;
    background-color: blue;
  }
}

.donghua .box-1 {
  height: 50px;
  width: 50px;
  background: green;
  position: relative;
  animation: mymove-1 2s linear 0s 2 alternate;
  /* 动画名称 动画时间 速度曲线 延迟 播放次数 是否反向 */
}

.donghua .box-2 {
  height: 50px;
  width: 50px;
  background: red;
  position: relative;
  animation-name: mymove-2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: forwards;
}