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%{
}
}