空间转换 动画

133 阅读1分钟

空间转换、动画

animation	动画
keyframes	关键帧
infinite	无限
alternate	交替轮流、逆向播放
paused	        暂停
forwards	前进

空间转换

空间位移
	transform:translateX()
	transform:translateY()
	transform:translateZ
	transform:translate3d(x,y,z)
            
透视、景深、视拒
	perspective    600px-1200px
	给父元素添加实现一个近大远小的效果
            
空间转换
	围绕x轴旋转     transform:rotateX()
	围绕y轴旋转     transform:rotateY()
	围绕z轴旋转     transform:rotateZ()
	左手定则        方向的大拇指指向轴线的正值方向为正值旋转的方向
3d呈现   transform-style  flat   平面   默认值
		preserve-3d     开启3d环境   

动画

定义动画
	@keyframes 动画名称{
           from{}
           to{}
}

	@keyframes动画名称{
        0%{}
        50%{}
        100%{}
}

调用动画
	animation:动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置
	速度曲线
        
		ease  默认    https://cubic-bezier.com/#.17,.67,.83,.67
		linear  匀速
		steps()  逐帧动画
	次数           infinite    无线次
	反向播放       slternate
	停留结束位置   forwards
	暂停动画       animation-play- state:paused;
	动画延迟       animation-delay

单词

image.png