css3动画

css3动画

渐变

transition: all 2s 0ms linear;
transition-delay: 2s;
transition-duration: 1s;
transition-timing-function: linear;
transition-property: all;

移动 缩放

transform: rotate(10deg);
transform-origin: 0px 0px;
transform: scale(2,3);
transform: translate(10,20);
transform: skew(10deg,10deg);

3D动画

.div1 div {
      width: 100px;
      height: 50px;
      background-color: #00BFFF;
      border: 1px solid green ;
      border-radius: 5px;
      transform-style: preserve-3d;
      perspective: 100px;
      perspective-origin: left top;//透视点
    }
    .div1 div:hover{
      transform: rotate3d(1,2,3,4deg);
      transform: translate3d(20px, 0px, 0px);
    }

keyframe 帧动画

animation:move 2s linear forwards;
@keyframes move {
  from {
       width:300px;alternate
  }
  to{
       width:500px;
  }

  %10{
  }
  
  50%{
  }
}