CSS3|CSS3 transition动画、CSS3 transform变换、CSS3 animation动画
CSS3 transition动画:
1、transition-property 设置过渡的属性
2、transition-duration设置过渡的时间
3、transition-timing-function设置过渡的运动方式
inear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
CSS3 transform变换：
1、translate(x,y) 设置盒子位移
2、scale(x,y)设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective设置透视距离
6、transform-styleflat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ设置三维移动
8、rotateX、rotateY、rotateZ设置三维旋转
9、scaleX、scaleY、scaleZ设置三维缩放
10、tranform-origin设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
CSS3 animation动画：
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration动画时间
4、animation-timing-function动画曲线
linear匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay动画延迟
6、animation-iteration-count动画播放次数n|infinite
7、animation-direction
normal默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state动画状态
paused 停止
【CSS3|CSS3 transition动画、CSS3 transform变换、CSS3 animation动画】running运动
推荐阅读
- 2018-04-16动画练习作业
- 好看的动画都有一只有趣的动物，CoCo也不例外
- vue|vue canvas 手绘进度条动画
- 锦囊26（手势动画打造微信页眉的GIF动图）
- 迪士尼动画新作《寻龙传说》——一群特别女孩的爱与守护
- SwiftUI|SwiftUI 动画组件之Lottie小型高质量交互式的开源动画文件格式
- 商业短片动画可以定制吗
- 每日记|每日记 （粉红猪小妹—更适合家长看的二次元动画）
- 21.css3轮播效果
- jQuery动画