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