transform

transform: scale(2);
transform-origin: 0 0; /*等于transform-origin: left top*/
  • transform有多个function的情况
transform: rotate(90deg) translateX(100px);/*最终元素移动方向为正下方100px*/
transform: translateX(100px) rotate(90deg);/*最终元素移动方向为正右方100px*/

transition

transition: background 1.5s ease-in 1;
/* 从左到右
transition-property
transition-duration
transition-timing-function
transition-delay
*/
缺点: 无法在网页加载完毕后自动触发,只能手动触发,hover、click之类的,而且不能定义中间状态

transition案例

  • 上图关键属性
i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(0);
}
 
bg:hover i{
  transform: translate(-50%, -50%) scale(1);
}
bg:hover {
  opacity: 0.7;
  filter: grayscale(100%);
  transition: all 300ms cubic-bezier(0,0,0.2,1) 0;
}

Keyframe

  • 8 sub-properties

animation-name animation-duration animation-timing-function animation-delay animation-interation-count animation-direction(forward, reverse, alternate) animation-fill-mode animation-play-state

loading案例

/* <div class="loader"></div> */
.loader {
    margin: auto;
    border: 16px solid #bdc3c7;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    animation: coloredspin 4s linear infinite;
}
 
@keyframes coloredspin {
    0% {
        transform: rotate(0deg);
        border-top-color: #1abc9c;
        border-bottom-color: #1abc9c;
    }
 
    25% {
        border-top-color: #2ecc71;
        border-bottom-color: #2ecc71;
    }
 
    50% {
        transform: rotate(360deg);
        border-top-color: #3498db;
        border-bottom-color: #3498db;
    }
 
    75% {
        border-top-color: #9b59b6;
        border-bottom-color: #9b59b6;
    }
 
    100% {
        transform: rotate(720deg);
        border-top-color: #1abc9c;
        border-bottom-color: #1abc9c;
    }
}

Css中的3d效果

perspective property

requestAnimationFrame

  • 每个刷新帧执行一次,显示器60Hz,那么 requestAnimationFrame 每隔16.7ms执行一次。
  • 每一帧中的dom操作会被集中起来,在一次重绘或回流中完成
  • 隐藏的元素,该方法不会执行