变换:
transform
位移:translate
旋转:rotale
缩放:scale
变形:skew
变换原点:
transform-origin
left
top
right
bottom
center:默认
3D变换
transform-style:preserve-3d; //添加3D环境
prespective:数值
transform
rotateX
rotateY
rotateZ
translateX
translateY
translateZ
关键帧:
定义:
@keyframes mydong{
0%{
left:100px;
}
50%{
top:100px;
}
80%{
left:-100px;
}
}
使用 :
animation:4s 1s mydong ease 1; //运动时间 延迟时间 名称 运动方式 重复次数
运动方式:
ease:慢速开始,然后已是已是变快
ease-in:慢速开始
ease-out 慢速结束
ease-in-out:开始和结束都慢
cubic-bezier(1,0,1,0) 贝瑟而曲线
http://xuanfengge.com/easeing/ceaser/
https://pan.baidu.com/s/1cwdZXW
上课代码和视频