动画效果
过渡(transition):
transition:(all) 2s
表示为所有属性均为两秒过渡
若要特指某种属性则为:
transition:属性 2s
过渡曲线:
ease默认(过渡函数)
可设置为linear (线性)
延时属性
默认为0s,适用于多个动画
变幻(transform):
平移translate(x,y)分别代表x,y两个轴
translate3d(x,y,z)
transform: translateX();特指x
transform: translateY();特指y
缩放 transform:scale(x,y)
transform:scales3d(x,y,z)
transform:scaleX/Y/Z()特指某一轴
旋转
transform:rotate(xdeg)x表示多少度
transform:rotateX/Y()沿X,Y轴旋转
均中心点(为对角线交点)进行旋转
Transform-origin:left
以图形左边进行旋转
帧动画
animation: 名称 时间 运行方式 运行次数(infinite永久)延时
@keyframes 名称{
from{
}
to{
}
}
从某种状态到另一种状态